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

时间:2013-09-15 13:44:08

标签: css

(希望)快速提问:

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

感谢。

1 个答案:

答案 0 :(得分: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;
}