(希望)快速提问:
我有一个无序列表设置为 display:table 和 li 设置为 display:table 单元格,因为我希望列表占据容器 div 的整个宽度,而不管有多少列表项。问题是我想要一个嵌套的下拉列表有一个块显示,所以项目在彼此之下。我之前通过将父列表设置为 Block,向左浮动,然后将嵌套列表设置为 float:none 来完成下拉列表。
我尝试了一些方法来将嵌套列表从表设置为块,但它不是为我做的!
我错过了一些简单的东西,或者这会按我想要的方式工作吗?
这是HTML
<div id = "headernavcontainer">
<div id = "headernav">
<ul id = "mainnav">
<li><a class = "mainnav" href="index.html">Home</a></li>
<li><a class = "mainnav" href="#">Company</a>
<ul>
<li><a class = "subnav" href="index.html">About Us</a></li>
<li><a class = "subnav" href="#">Location</a></li>
<li><a class = "subnav" href="#">Services</a></li>
</ul>
</li>
<li><a class = "mainnav" href="#">Employment</a></li>
<li><a class = "mainnav" href="#">Gallery</a></li>
<li><a class = "mainnav" href="#">Contact Us</a></li>
</ul>
</div>
</div>
这是CSS:
#headernavcontainer
{
width:100%;
height:50px;
background-color:gray;
margin:0;
padding:0;
}
#headernav
{
position:relative;
margin:0 auto;
padding:0;
width:960px;
background-color:gray;
}
#mainnav
{
list-style:none;
//float:left;
width:100%;
position:relative;
margin:0 auto;
padding:0;
display:table;
font-family:Century Gothic, sans-serif;
font-weight:bold;
font-size: .8em;
}
#mainnav li
{
//float:left;
margin:0;
padding:0;
position:relative;
line-height:50px;
margin-right:0;
display:table-cell;
border-right:1px #000 solid;
}
#mainnav li:nth-child(10)
{
border-right:none;
}
#mainnav a.mainnav
{
display:block;
color:#000;
background:#333;
text-decoration:none;
text-align:center;
//vertical-align:middle;
}
#mainnav a:hover
{
color:#fff;
background:red;
}
#mainnav ul
{
display:block !important;
//overflow:hidden;
background:#fff;
list-style:none;
position:absolute;
left:-9999px;
//vertical-align:middle;
background:green;
}
#mainanv ul li
{
//float:none;
//display:block;
display:block !important;
}
#mainnav li:hover ul
{
left:0;
//display:block;
}
这里有一个 jfiddle 来帮助说明我在做什么!http://jsfiddle.net/cEw5k/
谢谢。