Question

我正在尝试使用css创建一个多级导航菜单。我想这很简单，但我无法弄清楚我遇到问题的地方。下面是我的CSS。

/********** General Styles **********/

body{
font-family:Arial, Tahoma, sans-serif;
font-size:14px;
color:#444549;
}

/********** Structure Styles **********/

div.center-container{
    width:980px;
    margin:0 auto;
    overflow:hidden;
    position: relative;
    background: #cbcbcb;
}

.empty-div{
height: 400px;
}
/********** Navigation **********/

#menu-container{
margin-top:100px;
background:url(../img/nav_bg.png) 0 0 repeat-y;
height:42px;
}

#nav{
float:left;
margin:0;
padding:0;
margin-left: 48px;
}

#nav li{
list-style:none;
position:relative;
}

#nav li a, #nav li{
    float: left;
}

#nav li a{
    text-decoration: none;
    padding: 1em 1em;
    color: #fff;
    text-transform:capitalize;
    border-bottom: 1px solid #cbcbcb;
}

#nav li a:hover{
    background:white;
    color: #00c6ff;

    /*
     -moz-border-radius-topright: 10px;
    -moz-border-radius-topleft: 10px;
    -webkit-border-top-right-radius: 10px;
    -webkit-border-top-left-radius: 10px;
    border-top-left-radius: 10px;
    border-top-left-radius: 10px;
    */

}

/********** Sub-menu **********/
#nav li ul{
display:block;
position: absolute;
left:0;
top:100%;
padding:0; margin:0;
}

这是我的HTML

<body>
<div id="header-container"><!--  --></div>

<!-- Navigation -->
<div id="nav-container">
    <div class="center-container">
        <div id="menu-container">
            <ul id="nav">
                <li><a href="#">about us</a></li>
                <li><a href="#">solutions area</a>
                    <ul>
                        <li><a href="#">sub menu example 1</a></li>
                        <li><a href="#">sub menu example 2</a></li>
                        <li><a href="#">sub menu example 3</a></li>
                        <li><a href="#">sub menu example 4</a>
                            <ul>
                                <li><a href="#">sub menu example 1</a></li>
                                <li><a href="#">sub menu example 2</a></li>
                                <li><a href="#">sub menu example 3</a></li>
                                <li><a href="#">sub menu example 4</a></li>
                                <li><a href="#">sub menu example with an extra long title 5</a></li>
                            </ul>
                        </li>
                        <li><a href="#">sub menu example with an extra long title 5</a></li>
                    </ul>
                </li>
                <li><a href="#">service and support</a></li>
                <li><a href="#">industries</a></li>
                <li><a href="#">products</a></li>
                <li><a href="#">news &and; media</a></li>
                <li><a href="#">contact &and; support</a></li>
            </ul>
        </div> <!-- end menu-container -->
    </div> <!-- end center-container -->
</div> <!-- end nav-container -->

<div id="banner-container">
    <div class="center-container">
        <div class="empty-div"></div>
    </div> <!-- end center-container -->
</div> <!-- end banner-container -->

<div id="footer-container"><!--  --></div>

我还有一个重置所有浏览器CSS的reset.css。问题是子菜单没有出现，但是当我在开发人员工具中检查它应该是什么时（它是不可见的）。

Answer 1

将背景颜色提供给body而不是div.center-container，因为在HTML标记中定义了.center-container两次，所以第二次与第一次＆amp;同时删除overflow:hidden。

像这样写：

body{
 background: #cbcbcb;
}

子菜单不会出现在浏览器中。我相信它与css定位有关

1 个答案: