删除 HTML 下拉菜单上的缩进答案

【问题标题】：Removing indentions on a HTML dropdown menu删除 HTML 下拉菜单上的缩进
【发布时间】：2016-02-21 12:07:18
【问题描述】：

我真的是编码新手，我想知道如何从下拉菜单中删除这些丑陋的缩进。 indention_dropdown

我的 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>

我的 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 */

（忽略我的 CSS 上的 cmets，它们仅供我自己参考）我知道我的编码有点古怪……如果您对如何改进它有任何建议，那也将是最受欢迎的： )

【问题讨论】：

浏览器默认使用填充渲染

标签： jquery html css

【解决方案1】：

你需要在#nav ul.sub1类中添加padding:0px -

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

DEMO

【讨论】：