Jquery 删除HTML下拉菜单上的缩进_Jquery_Html_Css

Jquery 删除HTML下拉菜单上的缩进

jquery html css

Jquery 删除HTML下拉菜单上的缩进,jquery,html,css,Jquery,Html,Css,我对编码非常陌生，我想知道如何从下拉菜单中删除这些难看的缩进我的HTML: <!DOCTYPE HTML> <html> <head> <title>CSS Layout Tutorial</title> <link rel="stylesheet" href="main.css"> </head> <body> <div id="container"> &l

我对编码非常陌生，我想知道如何从下拉菜单中删除这些难看的缩进

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

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上的评论，它们是我自己的参考）我知道我的编码有点怪…如果你对如何改进它有任何建议，那也非常欢迎：）

你需要在类

中添加填充：0px
#nav ul.sub1

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

默认情况下，浏览器使用填充来呈现

元素，请参见CodeRomeos提供的答案。我建议使用，以避免这些问题，并在浏览器和平台之间保持一致的布局。