css - 为嵌套列表设置不同的显示规则

Question

(希望)快速提问:

我将无序列表设置为 display:table 并将 li 设置为 display:table 单元格，因为我希望列表占据容器 div 的整个宽度，而不管列表项有多少。问题是我想要一个嵌套的下拉列表有一个 block 显示，所以元素在彼此之下。我之前通过将父列表设置为 Block，向左浮动，然后将嵌套列表设置为 float:none 来完成下拉列表。

我已经尝试了一些方法来设置从表到 block 的嵌套列表，但它不适合我!

我错过了一些简单的东西，或者这会按照我想要的方式工作吗？

这是 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/

谢谢。

Answer 1

Jsfiddle:http://jsfiddle.net/cEw5k/1/

CSS:

#mainnav li:hover ul
{  
    left:0;
    width:100%;
    display:block;
    padding-left:0;
}

#mainnav li ul li {
    display:block;
}

#mainnav li ul li a {
    display:block;
    width:95%;
    padding-left:10px;
}