Question

子ul不占用可用的总宽度（与其父ul项容器相同）。此外，尽管在悬停时设置了背景颜色属性，但悬停似乎根本不会影响其背景颜色。如果有人能够找到我在这里缺少的基本概念并帮助我解决它们，我将不胜感激。这是我的HTML代码片段（这里是jsfiddle）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<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#navmenu li ul.sub1 li {
        border:black 1px solid;
        background:yellow;
        border-radius:5px;
        height:30px;
        text-align:center;
        line-height:30px;
        width:100%;
    }
    ul#navmenu li ul {
        position:absolute;
        display:none;
    }
    ul#navmenu li:hover ul{
        background-color:#FC6;
        display:block;
    }


</style>      
<title>Untitled Document</title>
</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

请参阅updated jsfiddle：

ul#navmenu li ul.sub1 {
    width: 100%;
}

只需制作整个ul 100％，而不仅仅是li。

在：

before

后：

after

Answer 2

您可以通过在第72行删除选择器中的最后一个ul来修复背景悬停效果。

在：

ul#navmenu li:hover ul {
background-color:#FC6;
display:block;
}

在

ul#navmenu li:hover {
background-color:#FC6;
display:block;
}

为什么父级无序列表项中的子级无序列表占用整个可用空间的父元素？

2 个答案: