1

（希望）快速提问：

我有一个无序列表设置为 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/

谢谢。

4

1 回答 1

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;
}
于 2013-09-15T14:01:51.533 回答