css子菜单在wordpress中表现

Question

我手动将菜单添加到我的wordpress header.php主题文件中 当我使用单个ul但是如果我使用WP的子菜单功能并在单个菜单链接下添加移动项目时，一切看起来都很棒，这里可以看到一个奇怪的结果。

我正在寻找的结果是添加一个：悬停效果，它只会显示子菜单项，但首先是项目应该排在正确的项目下（作业 - ＆gt;求职者＆amp;工作机会）

为什么我会得到意想不到的521px子菜单宽度以及如何解决我的困境

<li id="menu-item-103" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-103"><a href="http://ldpolishing.com/_dev/jobs/job-offers/">Jobs</a>
<ul class="sub-menu">
    <li id="menu-item-101" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-101"><a href="http://ldpolishing.com/_dev/jobs/job-seekers/">Job Seekers</a></li>
    <li id="menu-item-102" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-102"><a href="http://ldpolishing.com/_dev/jobs/job-offers/">Job Offers</a></li>
</ul>
</li>

Link to the page 谢谢

Answer 1

原则很简单。您可以将父<li>标记设置为position: relative;，然后您可以将.sub-menu设置为position: absolute;并设置为left: 0;，以便它排成一行在<li>的左侧。

然后，当您将鼠标悬停在li上时，您可以隐藏子菜单并显示它。

试试这个CSS：

#top .menu li {
   position: relative;
}

#top .menu .sub-menu {
   display: none;
   position: absolute;
   left:0;
   text-align: left;
   margin:0;
   width: 150px;
}

#top .menu .sub-menu .li {
   padding:0;
}

#top .menu li:hover > .sub-menu {
   display: block;
}

Answer 2

为什么不给出我尝试构建的基于jQuery的菜单脚本？它使用CSS和jQuery的组合来创建键盘可访问的水平菜单，并支持最多五个级别的导航。此外，它还具有上下文突出显示/调暗功能，在您浏览菜单时显示路径：

http://code.google.com/p/keyboard-accessible-jquery-menu/

你可以在这里看到它的演示：

http://designbymichael.com/dev/top-menu/demo/

关于你的源代码，你遇到了一些问题 - 你的父LI标签应该具有属性position：relative来为你的子菜单提供一个起始位置。然后你的子菜单应该有位置：绝对，然后相应地偏离父导航。我还建议使用margin-right而不是padding-right作为菜单间距，因为你试图在菜单项之间设置一个边距空间，而不是只在每个项目的一边设置这种极端填充。

正如@Ennui指出的那样，如果你想把它变成一个JSFiddle（jsfiddle.net），你就可以让我们分发你的副本，进行编辑，并告诉你我们想出了什么。

这就是说，节省一点时间并使用预先构建的菜单脚本而不是试图重新发明轮子。绝不，不要觉得你必须使用我的 - 有数百个脚本可供选择。