我有一個網站,其導航欄由div
元素製成。HTML div標籤顯示爲內嵌
出於某種原因,導航欄在之外顯示其包含div。
此外,它的行爲如同內嵌,即它不會在包含div的寬度上傳播,而是在它包含的最後一個元素之後的右邊結束。任何後續元素將立即顯示在其右側,同一行上。
HTML:
<body>
<header>
<img src="imgs\coolPic.jpg />"
<div id="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Foobar</a>
<ul class="submenu">
<li><a href="#">Foo</a></li>
<li><a href="#">Bar</a></li>
</ul>
</li>
<li><a href="#">Lorem Ipsum</a>
<ul class="submenu">
<li><a href="#">Lorem</a></li>
<li><a href="#">Ipsum</a></li>
</ul>
</li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</header>
...more body stuff...
</body>
CSS:
header {
background-color: #cccccc;
}
#nav {
background-color: #cccccc;
border-bottom: 2px solid #000000;
position: absolute;
}
#nav ul li {
float:left;
display:block;
}
#nav ul li a:link,
#nav ul li a:visited
{
display:block;
padding: 8px 12px;
background-color: #cccccc;
text-decoration: none;
color: #111111;
}
#nav ul li a:hover {
background-color: #111111;
color: #cccccc;
}
#nav ul li ul li{
float:none;
display:block;
}
#nav ul li ul li a:link,
#nav ul li ul li a:visited{
color:#444;
font-size:11px;
font-weight:bold;
text-decoration:none;
padding:0 10px;
clear:both;
border-bottom:solid 1px #DEDEDE;
}
#nav ul li ul li a:hover{
color:#3B5998;
}
.submenu {
position: absolute;
width: 160px;
padding: 10px;
border: solid 1px #2E4B88;
border-top: none;
display: none;
line-height: 26px;
z-index: 1000;
}
...而且,如果你想知道,這裏是使正確的導航欄工作的jQuery:
function nav(){
$('div#nav ul li').mouseover(function() {
$(this).find('ul:first').show();
});
$('div#nav ul li').mouseleave(function() {
$('div#nav ul li ul').hide();
});
$('div#nav ul li ul').mouseleave(function() {
$('div#nav ul li ul').hide();;
});
};
$(document).ready(function() {
nav();
});
(Cre DIT指出:我發現了jQuery here)
我試圖玩弄的CSS的header
和div #nav
元素position
性能,但它並沒有多大幫助。
問題發生在Firefox,Chrome和IE瀏覽器中。
任何好點子?
http://jsfiddle.net/4fND9/ –
你使用DOCTYPE和驗證你的HTML? –