Question

我设计的网页有一个标题，在标题的正下方我有一个带有几个子菜单的水平导航菜单，然后是正文/内容和页脚。但是，导航菜单隐藏在页面的正文部分旁边，我无法选择任何子菜单。

HTML代码如下：

    <body bgcolor="#CCCCCC">    
    <div id="top_wrapper">
    <div id="ch_name">the website</div>
    </div>
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <div id="nav">
        <div id="navigation" align="center">
            <ul id="menu">
                <li><a href="#">Home</a></li>
                    <li>
                        <a href="#">History</a>
                        <ul class="hidden">
                            <li><a href="#">Early History</a></li>
                            <li><a href="#">From 17<sup>th</sup> Century</a></li>
                            <li><a href="#">From 21<sup>th</sup> Century</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">menu 2</a>
                        <ul class="hidden">
                            <li><a href="#">drop down 1</a></li>
                            <li><a href="#">drop down 2</a></li>
                            <li><a href="#">drop down 3</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">menu 3</a>
                        <ul class="hidden">
                            <li><a href="#">drop down 1</a></li>
                            <li><a href="#">drop down 2</a></li>
                            <li><a href="#">drop down 3</a></li>
                            <li><a href="#">drop down 4</a></li>                            
                        </ul>
                    </li>
                    <li><a href="#">News</a></li>
                    <li><a href="#">Contact Us</a></li>
            </ul>
        </div>
    </div>  
<div id="container">
<div class="verses">
            <h1>verses</h1>
        </div>
        <div class="box">
            <div class="sidebar">
            <h1>timings</h1>    
            </div>
            <div class="content">
            <h1>News</h1>
            </div>
            </div>
            </div>
<div class="clear"></div>
<div id="footer"><p>the footer</p></div>
</body>

和相应的CSS代码是：

    /*for top div wrapper*/


#top_wrapper{
    background: #003;
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100px;
}

#nav{
    margin: 0 auto;
    text-align: center;
    width: 900px;
}

#ch_name{
    font:70px Georgia, serif;
    color:#ddd;
    text-align:center;

}

ul {
    list-style-type:none;
    margin:0;
    padding:0;
    position: absolute;
}

li {
    display:inline-block;
    float: left;
    margin-right: 1px;
}

/*Style for menu links*/
li a {
    display:block;
    min-width:140px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #fff;
    background:  #2f3036;
    text-decoration: none;
}

/*Hover state for top level links*/
li:hover a {
    background: #778899;
}

/*Style for dropdown links*/
li:hover ul a {
    background: #f3f3f3;
    color:  #2f3036;
    height: 40px;
    line-height: 40px;
}

/*Hover state for dropdown links*/
li:hover ul a:hover {
    background: #778899;
    color: #fff;
}

/*Hide dropdown links until they are needed*/
li ul {
    display: none;
}

/*Make dropdown links vertical*/
li ul li {
    display: block;
    float: none;
}

/*Prevent text wrapping*/
li ul li a {
    width: auto;
    min-width: 100px;
    padding: 0 20px;
}

/*Display the dropdown on hover*/
ul li a:hover + .hidden, .hidden:hover {
    display: block;
}

/*div box styles */

.Table
    {
        display: table;
        align:center;
    }
    .Title
    {
        display: table-caption;
        text-align: center;
        font-weight: bold;
        font-size: larger;
    }
    .Heading
    {
        display: table-row;
        font-weight: bold;
        text-align: center;
    }
    .Row
    {
        display: table-row;
    }
    .Cell
    {
        display: table-cell;
        border: solid;
        border-width: thin;
        padding-left: 5px;
        padding-right: 5px;
    }

#container {
    position:relative;
    margin:0 auto;
    width:800px;
    }

.box{
            background-color: #f0f0f0; 
            height: 500px;
        }

        .verses{
            margin-top:12px;
            background-color:#679BB7;
            height:20%;
            width:100%;
            margin-bottom: 12px;

        }

        .sidebar{
            background-color: #bbd2df; 
            width: 350px; 
            height: 100%; 
            float: left; 
            border-right-style: solid;
            border-bottom-style: solid;
            border-color: #000;
            border-width: 12px;
        }
        .content{
            height: 100%; 
            float: left;
            border-bottom-style: solid;
            border-color: #000;
            border-width: 12px;
        }   

    #footer {
    background:#cccc66;
    padding:10px;
    text-align:center;
    }

.clear {clear:both;}

所以.....我在这里做错了什么？

感谢。

Answer 1

在li的样式中注释float:left，为ul注释position:absolute。它会起作用

li {
    display: inline-block;
    /*float: left;*/
    margin-right: 1px;
}

ul {
    list-style-type:none;
    margin:0;
    padding:0;
    /*position: absolute;*/
}

Updated Fiddle

浮动元素不会包含在父容器中。在你的情况下，<ul>的高度为0，因为它的所有子节点都是float类型。

如何使导航菜单与网页的正文重叠

1 个答案: