Question

（希望）快速提问：

我有一个无序列表设置显示：table和li设置为display：table cell，因为我希望列表占用容器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;
}

这是一个帮助说明我要做的事情！ 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;
}

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

1 个答案: