Question

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

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

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

3.当我使用chrome dev工具时，我可以看到nav 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：
标头{ 身高：75px; background：url（images / background.png）; background-repeat-x：repeat; border-bottom：4px solid＃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

Here's a fiddle example

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

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

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

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

要永久显示该项目，请仅使用“onMouseOver”javascript函数。这样，它只会在您第一次悬停项目时触发，并且在您悬停时不会被移除或重置。
要轻松将子导航中心对齐到主导航，您可以使子导航项成为内联块。但是请注意，旧版本的IE不能很好地支持内联块，但是你可以做些事情来处理它。
抱歉，我没有花时间处理这个问题，因为我的代码不是基于您的代码。

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

css水平下拉导航菜单

1 个答案: