Jquery css水平下拉导航菜单

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

1.我希望永久显示下拉菜单，即使用户已将鼠标指针从主菜单中的一个链接移开，如本例所示：www.msn.com。 我认为我必须使用jQuery来实现这一点，但我没有任何javascript方面的经验

2.如何在下拉列表中将文本居中？目前看起来是这样的：

3.当我使用chrome开发工具时，我可以看到导航ul项目在导航块之外，为什么会发生这种情况？如何在不使用

位置：绝对的情况下修复它，这不是一个问题，但如果有人想用wordpress添加另一个主菜单项，但不知道如何编辑css，这将是一个问题。

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>


我用了这个。对它进行了补充，并做了一些简单的jQuery

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

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

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

要永久显示该项，只需使用“onMouseOver”javascript函数。这样，它只在您第一次悬停项目时触发，而在您悬停关闭时不会被删除或重置

要轻松将子导航居中对齐到主导航，请将子导航项目设置为内联块。然而，请注意，旧版本的IE并不支持内联块，但您可以做一些事情来处理它

对不起，我没有花时间回答这个问题，因为我的代码不是基于你的代码

希望这会有帮助！
干杯
 

我用了这个。对它进行了补充，并做了一些简单的jQuery

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

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

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

要永久显示该项，只需使用“onMouseOver”javascript函数。这样，它只在您第一次悬停项目时触发，而在您悬停关闭时不会被删除或重置

要轻松将子导航居中对齐到主导航，请将子导航项目设置为内联块。然而，请注意，旧版本的IE并不支持内联块，但您可以做一些事情来处理它

对不起，我没有花时间回答这个问题，因为我的代码不是基于你的代码

希望这会有帮助！
干杯
 @Constantine-确保在StackOverflow上投票并接受答案：访问此链接：@Constantine-确保在StackOverflow上投票并接受答案：访问此链接：
#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;
}