CSS水平下拉導航菜單

我想實現一個水平下拉菜單中進入我的網站，我碰到了一些問題：CSS水平下拉導航菜單

1.I要永久顯示在下拉菜單中，即使用戶已將鼠標指針從主菜單中的某個鏈接移開，如下例所示：www.msn.com。我認爲我必須使用jQuery，但我沒有任何關於javascript的使用經驗。

2.如何將文本置於下拉ul中？目前，它看起來像這樣： http://i.imgur.com/juFmp.png

3.當我使用Chrome瀏覽器開發工具，我可以看到，資產淨值UL項目的NAV外塊，爲什麼會出現這種情況？我怎樣才能修復它，而不使用position: absolute;，它不是一個問題，但它會是如果有人想要添加另一個主菜單項與wordpress，但不知道如何編輯CSS。 http://i.imgur.com/BUk7r.png

HTML：

<header> 
<div id="wrap">  
    <a id="logo" href="<?php bloginfo('siteurl');?>" title="Vratite se na početnu stranicu" > 
     <img src="<?php bloginfo('template_url');?>/images/logo.png"  alt="Obrtnička Škola Koprivnica Logo" width="53" height="70" /> 
    </a> 
    <h1>OBRTNIČKA ŠKOLA KOPRIVNICA</h1> 
    <nav> 
     <?php wp_nav_menu(array('menu' => 'Main' , 'container' => none)); ?> 
    </nav> 
</div>

CSS：
頭{ 高度：960x75像素; background：url（images/background.png）; background-repeat-x：repeat; border-bottom：4px solid＃0094e4; box-shadow：0 2px 5px #ccc; padding：1px; }

#wrap { 
min-width: 740px; 
max-width: 1180px; 
height: 75px; 
margin: 0 auto; 
} 

#logo { 
position: relative; 
float: left; 
margin: 3px 15px 3px 0; 

} 

nav { 
width: 535px; 
height: 25px; 
} 

nav ul li { 
margin: 0 10px 0 1px; 
display: inline; 
list-style: none; 
line-height: 25px; 
padding-bottom: 14px; 
} 

nav ul li a { 
color: white; 
line-height: 25px; 
font-size: 1.2em; 
} 

nav ul ul { 
display: none; 
position: absolute; 
top: 75px; 
} 

nav ul ul a { 
color: black; 
font-size: 0.9em; 
} 

nav ul li:hover > ul { 
display: block; 
}

來源

2012-03-19 fbartolic

Here's a fiddle example。我使用了horizontal links pattern from pea.rs。稱讚clearfix micro hack並做了一些簡單的jQuery。

有多種方法可以做到這一點。我所做的是做基本的嵌套水平列表。我用CSS定位了絕對定位的主菜單下的輔助子菜單。就像MSN.com一樣，我通過在主導航的底部添加填充以適合子導航，爲該處分配空間總是具有某種菜單或空白空間。

使用CSS，我將子菜單從常見的「left：-999em」模式移出屏幕，並在主菜單項具有「active」類時將其重新定位。

所有剩下的就是一個小型的jQuery腳本，用於在新建項目時將所有「活動」類刪除，並將「活動」類重新添加到新懸停的項目中。

要永久顯示該項目，只使用「onMouseOver」javascript函數。這樣，它只會在您第一次懸停該項目時觸發，並且在您懸停時不會被移除或重置。
要輕鬆將sub-nav居中對齊到主導航欄，您可以使子導航項內嵌塊。但是，請注意，inline-block在舊版本的IE中不太受支持，但有些事情可以使用它來處理。
對不起，我沒有花費任何時間在這個問題上，因爲我的代碼不是基於你的代碼。

希望這會有所幫助！乾杯！

來源

2012-03-20 00:13:04 jmbertucci

謝謝，它工作得很好！ – fbartolic 2012-03-23 09:17:44

@Constantine - 確保在StackOverflow上投票並接受答案：訪問此鏈接：http://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work – 2012-03-23 09:35:38

CSS水平下拉導航菜單

回答

相關問題