为什么父级无序列表项中的子级无序列表不占据其父级元素的整个可用空间？
[英]Why is not a child unordered list inside of a parent unordered list item occupying the whole space available as of it's parent element?
问题描述
The child ul is not occupying the total width available to it (same with its parent ul item container). 
子ul未占用可用的总宽度（与其父ul项目容器相同）。 Also, the hover seems likely not to effect its background colour at all, though the background colour property has been set on hover. 同样，尽管在悬停上设置了背景颜色属性，但悬停似乎根本不会影响其背景颜色。 I would be grateful if someone could pinpoint the basic concepts I am missing here and also help me to fix them. 如果有人可以指出我在这里缺少的基本概念并帮助我修复它们，我将不胜感激。 Here is my HTML code fragment (and here is the jsfiddle ): 这是我的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>
2 个解决方案
解决方案1
1 已采纳 2015-05-10 16:31:40
See the updated jsfiddle : 参见更新的jsfiddle ：
ul#navmenu li ul.sub1 {
width: 100%;
}
Just make the entire ul 100%, not just the li . 只要使整个ul 100％，而不仅仅是li 。
Before: 之前：
After: 后：
解决方案2
0 2015-05-10 16:53:13
You can fix the background hover effect by removing the last ul from your selector on line 72. 您可以通过从第72行的选择器中删除最后一个ul来解决背景悬停效果。
Before: 之前：
ul#navmenu li:hover ul {
background-color:#FC6;
display:block;
}
After 后
ul#navmenu li:hover {
background-color:#FC6;
display:block;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.