Question

我一直在尝试用HTML和CSS设计多级导航菜单，但是无法将列表项堆叠在ul.sub1中。他们肯定似乎遵守为ul＃navmenu li定义的规则，但这绝对不是我的预期。 ul.sub1下的列表项应该堆叠在一起，而不是一个接一个地水平对齐。我正在制作的逻辑错误是什么？请解释，因为我是CSS Navigational Menus的新手。这是我的HTML代码段：

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
    *{
        margin:0px;
        padding:0px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;    
        box-sizing: border-box;  <!--Specifies an element should have padding and border included in element's total width and height-->
        <!--Content Box is the default value for the height and width properties-->
    }  
    <!--Resetter rules for browsers-->
    #bodyContainer {
    }
    body {
        border:black 2px solid;
        background-color : grey;
        padding:5px;
    }
    div#header {
        margin:10px auto;
        background-color : red;
        width:70%;
        -webkit-border-radius:15px;
        -moz-border-radius:15px;
        border-radius:15px;
    }
    div#header1 {   
        display:inline-block;
        width:50%;
        text-align:center;
        line-height:80px;
    }
    div#header2 {
        display:inline-block;
        width:50%;
        text-align:center;
        line-height:80px;
    }
    ul#navmenu , ul.sub1{
        list-style-type:none;
        background-color:#444;                  
        margin-bottom:20px;
        border-radius:5px;
    }
    ul#navmenu li {
        border:black 1px solid;
        background:yellow;
        border-radius:5px;
        height:30px;
        text-align:center;
        line-height:30px;
        width:33.33%;
        float:left;
        position:relative;
    }
    ul#navmenu a {
        text-decoration:none;
        width:100%;
        display:block;
    }
    ul.sub1 li {
        border:black 1px solid;
        background:yellow;
        border-radius:5px;
        height:30px;
        text-align:center;
        line-height:30px;
        width:100px;
        positipn:absolute;
        display:block;
    }

</style>
</head>
<body>
<div id="bodyContainer">
    <div id="header">
        <div id="header1"><h1>Welcome</h1></div><div id="header2"><h1>You Get to choose better !! </h1></div>           
    </div>
    <div id="content">
        <div id="contentHeader">
            <p>You Select ... We Serve </p>
        </div>
        <div id="nav">
            <ul id="navmenu">
                <li><a href="#">Home</a>
                    <ul class="sub1">
                        <li><a href="#">Home1</a></li>
                        <li><a href="#">Home2</a></li>
                        <li><a href="#">Home3</a></li>
                    </ul>
                </li>
                <li><a href="#">Electronics</a></li>
                <li><a href="#">Fashions</a></li>
            </ul>
        </div>
    </div>
    <div id="sidebar">
    </div>
    <div id="footer">
        <p>WebApp Version Numbered v1.0. All rights Reserved. </p>
    </div>
</div>
</body>
</html>

Answer 1

＆＃34; li＆＃34;由于父母＆＃34; li＆＃34;的特征更高，因此您遇到问题的元素会被更高的特殊性所覆盖。＆＃34; ul＃navmenu li＆＃34;与＆＃34; ul.sub1 li＆＃34;

所以要么添加：

width: 100% !important;

到你的＆＃34; ul.sub1 li＆＃34;规则，或制定更高特异性的相同规则，例如：

ul#navmenu li ul.sub1 li

和＆＃34; ul.sub1 li＆＃34;的宽度宽度将被使用。

您可以在这篇粉碎文章中了解有关CSS特异性的更多信息：http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

为什么位置相对和浮动左侧导致多级导航下拉行为意外？

1 个答案: