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 に答える