CSS水平下拉導航菜單

Question

我正在嘗試在網站中實現水平下拉菜單，但遇到了一些問題：

1.我想永久顯示下拉菜單，即使用戶將鼠標指針從主菜單中的鏈接之一移開，例如本例：www.msn.com。 我認為我必須為此使用jQuery，但是我對JavaScript沒有任何經驗。

2.如何在下拉列表ul中居中顯示文本？ 目前看起來像這樣： http : //i.imgur.com/juFmp.png

3.當我使用chrome dev工具時，可以看到nav ul項目在nav塊之外，為什么會這樣？ 我如何不使用position: absolute;來解決它position: absolute; ，這不是atm的問題，但是如果有人想通過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：
標頭{高度：75像素； 背景：url（images / background.png）; background-repeat-x：重復； border-bottom：4px實心＃0094e4; box-shadow：0 2px 5px #ccc; 填充：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;
}

Answer 1

這是一個小提琴的例子 。

我使用了來自pea.rs的水平鏈接模式 。 用clearfix micro hack對其進行了補充 ，並做了一些簡單的jQuery。

有多種方法可以做到這一點。 我所做的是做基本的嵌套水平列表。 我使用CSS將絕對位置的輔助子菜單定位在主菜單下。 就像MSN.com一樣，我通過在主導航欄的底部添加填充以適應子導航，在其中始終為菜單或空白空間分配空間。

使用CSS，我使用通用的“ left：-999em”模式將子導航移出屏幕，並在主菜單項具有“ active”類時將其重新定位。

剩下的就是一個小的jQuery腳本，當移至新項目上並將“活動”類重新添加到新懸停的項目時，該腳本將刪除所有“活動”類。

1. 要永久顯示該項目，請僅使用“ onMouseOver” javascript函數。 這樣，它只會在您第一次將鼠標懸停在該項目上時觸發，而在您將鼠標懸停在該項目上時不會刪除或重置。

2. 要輕松將子導航的中心與主導航對齊，請將子導航項設置為內聯塊。 但是請注意，較舊版本的IE並沒有很好地支持內聯塊，但是您可以做一些事情來使用它。

3. 抱歉，我沒有花任何時間在這個問題上，因為我的代碼不是基於您的代碼。

希望這會有所幫助！ 干杯!