3

I'm really new to coding and I was wondering how I could remove these ugly indentions from my dropdown menu. indention_dropdown

My HTML:

<!DOCTYPE HTML>
<html>
<head>
<title>CSS Layout Tutorial</title>
<link rel="stylesheet" href="main.css"> </head>
<body>

    <div id="container">

        <div id="header">

            <h1><a href="#">Welcome to CLC!</a></h1>

                <ul id="nav" class="clearfix">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About</a>
                        <ul class="sub1">
                            <li><a href="#">Link 1</a></li>
                            <li><a href="#">Link2</a></li>
                            <li><a href="#">Link 3</a></li>
                        </ul>
                    </li><!--/About-->
                    <li><a href="#">Professors</a></li>
                    <li><a href="#">Classes</a>
                        <ul class="sub1">
                            <li><a href="#">Link 4</a></li>
                            <li><a href="#">Link 5</a></li>
                            <li><a href="#">Link 6</a></li>
                        </ul>
                    </li><!--Classes-->
                    <li><a href="#">Contact Us</a></li>
                </ul>
        </div><!--/header-->

        <div id="body" class="clearfix">

            <div class="main"><div class="main-inner">

                <h2>The Best Student Experience</h2>
            <p>This is a long paragraph saying stuff that I will use      
CSS on. This is a long paragraph saying stuff that I will use CSS on. This is  
a long paragraph saying stuff that I will use CSS on. This is a long  
paragraph saying stuff that I will use CSS on. This is a long paragraph 
saying stuff that I will use CSS on.</p>

                <h2>Another Subheading</h2>
                    <p>This is a long paragraph saying stuff that I will use 
CSS on. This is a long paragraph saying stuff that I will use CSS on. This is 
a long paragraph saying stuff that I will use CSS on. This is a long 
paragraph saying stuff that I will use CSS on. This is a long paragraph 
saying stuff that I will use CSS on.</p>
            </div><!--/main-inner--></div><!--/main-->

            <div class="side">

                    <p>This is a long paragraph saying stuff that I will use 
CSS on. This is a long paragraph saying stuff that I will use CSS on. This is 
a long paragraph saying stuff that I will use CSS on. This is a long 
paragraph saying stuff that I will use CSS on. This is a long paragraph 
saying stuff that I will use CSS on.</p>
            </div><!--/side-->

        </div><!--/body--> 

        <div id="footer"></div> <!--footer CSS does not work>!-->
            <p> &copy; 2016-All rights reserved</p>
        <div><!--/footer-->

    </div><!--container-->

</body>
</html>

My CSS:

body {
font-family: Arial, sans-serif;
background-color: #738294;
}

#container {
width: 900px;
padding: 30px; 
margin: 0 auto;
background-color: #FFF;
box-shadow: 5px 5px 5px;
}

h1{
position: relative; 
text-shadow: 3px 3px 3px #CCC;
}

#header h1{
/*background-image: url(../images/target.jpg);
width:660px; 
height: 165px;
text-indent: -9990px;*/
}
#header h1 a:link, #header h1 a:visited {
display: block;
text-decoration: none;
/*width: 660px;
height: 165px;*/
}

#nav {
margin: 0;
padding: 0;
background-color: yellow;
}

#nav li {
list-style: none;
float: left;
padding: 0;
position: relative;
}

#nav li a {
text-decoration: none;
text-align: center;
padding: 5px;
display: block;
border-right: 1px solid #b520ff;
width: 80px;
height: 25px;
}
#nav li:hover > a {
background-color: #904b24;
color: yellow;
}

#nav li:hover a:hover {
background-color: blue;
}

#nav ul.sub1 {
display: none;
position: absolute;
background-color: yellow;
}

#nav li:hover .sub1 {
display: block;
}

#body {
background: url(../images/pink.jpg);
} 

#body p {
line-height: 1.6em;
}

.main {
width: 600px;
float: left;
}

.main-inner {
padding: 0 60px 0 0;
}

.side {
width: 300px;
float: left;
}

#footer {
background-color: #4D5B6C;
color: #FFF;
} 

.clearfix:after {
content: "."; 
display: block; 
height: 0; 
clear: both; 
visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
/* @end */

(Ignore the comments on my CSS, they're for my own reference) I know my coding is a little funky...if you have any recommendations to me on how to improve it, that would also be most welcome : )

ROKAF
  • 119
  • 12
  • 1
    Browsers render
      elements with padding by default, see the answer by CodeRomeos. I would recommend using [CSS resets](http://stackoverflow.com/questions/11578819/css-reset-what-exactly-does-it-do) to avoid these issues and have a consistent layout across browsers and platforms.
     – Aziz Feb 21 '16 at 12:15

1 Answers1

4

You need to add padding:0px in class #nav ul.sub1 -

#nav ul.sub1 {
display: none;
position: absolute;
background-color: yellow;
padding:0px; /*remove extra space in child UL*/
}

DEMO

CodeRomeos
  • 2,428
  • 1
  • 10
  • 20