css水平下拉导航菜单

Question

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

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

2.如何让下拉框ul中的文字居中？目前它看起来像这样： http://i.imgur.com/juFmp.png

3.当我使用chrome开发工具时，我可以看到nav ul项目在nav块之外，为什么会发生这种情况？如何在不使用 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）； 背景-重复-x：重复； 边框底部：4px 实心#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”模式将子导航移出屏幕，并在主菜单项具有“活动”类时重新定位它。

剩下的就是一个小的 jQuery 脚本，用于在将鼠标悬停在新项目上时删除所有“活动”类并将“活动”类重新添加到新悬停的项目。

1. 要永久显示该项目，您只能使用“onMouseOver”javascript 函数。这样，它只会在您第一次悬停该项目时触发，并且不会在您悬停时被移除或重置。

2. 为了轻松地将子导航与主导航对齐，您可以将子导航项设置为内联块。但请注意，旧版本的 IE 不很好地支持 inline-block，但您可以做一些事情来处理它。

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

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