1

我在导航栏上创建了一个下拉列表，但它没有正确显示。每当我尝试打开列表时，我的项目旁边都会显示一个空白区域，即使我将背景颜色设置为蓝色。我该如何解决？这是它的外观以及我的代码的图像。提前致谢！

注意项目下拉列表周围的框

HTML：

<div id="container">
    <div id="header">
        <ul id="navBar">
            <li><a href="page1.html">Item1</a></li>
            <li><a href="page2.html">Item 2</a>
                <ul>
                    <li><a href="page3.html">Item 2.0</a></li>
                    <li><a href="page4.html">Item 2.1</a></li>
                    <li><a href="page5.html">Item 2.2</a></li>
                </ul>
            </li>
            <li><a href="page6.html">Item 3</a></li>
            <li><a href="page7.html">Item 4</a></li> 
            <li><a href="page8.html">Item 5</a></li>
            <li><a href="page9.html">Item 6</a></li>
        </ul>
    </div>
</div>

CSS：

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

#header ul#topnav ul, #header li{
float:left;
list-style:none;
margin:0;
padding:0;
}
#header li a:link, #header li a:visited, #header li a:hover{
display:block;
margin:0 2px 0 0;
padding:14px 20px;
color:#FFFFFF;
background-color:#159FC8;
}

#header ul#topnav ul li a:link, #header ul#topnav ul li a:visited{
border:none;
}

#header ul#topnav li.last a{
margin-right:0;
}

#header li li a:link, #header li li a:visited{
width:150px;
float:none;
margin:0;
padding:7px 10px;
font-size:12px;
font-weight:normal;
color:#FFFFFF;
background-color:#159FC8;
}

#header li li a:hover{
color:#666666;
background-color:#CCCCCC;
}

#header li ul{
background:#FFFFFF;
z-index:9999;
position:absolute;
left:-999em;
height:auto;
width:170px;
border-left:1px solid #CCCCCC;
border-bottom:1px solid #CCCCCC;
}

#header li ul a{width:140px;}

#header li ul ul{margin:-32px 0 0 0;}

#header li:hover ul ul{left:-999em;}

#header li:hover ul, #header li li:hover ul{left:auto;}

#header li:hover{position:static;}

#header li.last a{margin-right:0;}

#navBar{
width:960px;
height:45px;
clear:both;
margin:0;
padding:0;
list-style:none;
font-size:14px;
font-weight:bold;
font-family:Verdana, Arial, Helvetica, Sans-Serif;
color:#FFFFFF;
background-color:#159FC8;
}
4

1 回答 1

2

看看这个。

http://jsfiddle.net/qzMUd/

于 2012-05-10T15:43:58.873 回答