jquery - css水平下拉导航菜单

Question

我正在尝试在我的网站中实现水平下拉菜单，但我遇到了一些问题:

1.我想永久显示下拉菜单，即使用户将鼠标指针从主菜单中的链接之一移开，如本例所示:www.msn.com。 我认为我必须为此使用 jQuery，但我没有任何使用 javascript 的经验。

2.如何使下拉列表中的文本居中？目前它看起来像这样: http://i.imgur.com/juFmp.png

3.当我使用 chrome 开发工具时，我可以看到 nav ul 元素在 nav block 之外，为什么会这样？我如何在不使用 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:
标题{ 高度:75px； 背景:网址(图片/背景.png)； background-repeat-x:重复； border-bottom: 4px solid #0094e4; 框阴影: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

Here's a fiddle example .

我使用了 horizontal links pattern from pea.rs .用clearfix micro hack称赞它并做了一些简单的 jQuery。

有多种方法可以做到这一点。我所做的是做基本的嵌套水平列表。我使用 CSS 将二级子菜单定位在具有绝对定位的主菜单下方。就像 MSN.com 一样，我通过在主导航的底部添加填充以适应子导航来为始终存在某种菜单或空白空间分配空间。

使用 CSS，我使用常见的“left:-999em”模式将子导航移出屏幕，并在主菜单项具有“active”类时重新定位它。

剩下的就是一个小的 jQuery 脚本，用于在悬停在新元素上时删除所有“事件”类并将“事件”类重新添加到新悬停的元素。

1. 要永久显示该元素，您只需使用“onMouseOver”javascript 函数。这样，它只会在您第一次将鼠标悬停在元素上时触发，而不会在您悬停时移除或重置。

2. 为了轻松地将子导航居中对齐到主导航，您可以将子导航项设为内联 block 。但请注意，内联 block 在旧版本的 IE 中没有得到很好的支持，但您可以做一些事情来处理它。

3. 抱歉，我没有花时间回答这个问题，因为我的代码不是基于您的代码。

希望这会有所帮助! 干杯!