Question

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

我的HTML：

$("#expList > li").click(function () {
    $(this).find("ol").slideToggle();
});

$("#expList > li ol li").click(function () {
    return false;
});

我的CSS：

<!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的评论，他们是我自己的参考）我知道我的编码有点时髦......如果你有任何关于如何改进它的建议，那也是最受欢迎的：）

Answer 1

您需要在课程padding:0px -

中添加#nav ul.sub1

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

<强> DEMO

删除HTML下拉菜单中的缩进

1 个答案: