-1

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

我正在寻找的结果是添加一个 :hover 效果，它只会显示子菜单项，但首先这些项目应该排成一行，在正确的 li 项目下（工作 - >求职者和工作机会）

为什么我得到了意想不到的 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>

链接到页面 谢谢

4

2 回答 2

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;
}
于 2013-04-12T15:52:02.667 回答
0

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

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

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

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

至于你的源代码，你遇到了一些问题——你的父 LI 标签应该有属性 position: relative 给你的子菜单一个启动的起点。然后，您的子菜单应该有 position: absolute ，然后相应地定位父导航。我还建议您在菜单间距中使用 margin-right 而不是 padding-right，因为您试图在菜单项之间放置一个边距空间，而不是仅在每个项目的一侧进行如此极端的填充。

正如@Ennui 指出的那样，如果您将其设为 JSFiddle (jsfiddle.net)，您将允许我们将您的副本分支出来，进行编辑，并向您展示我们的想法。

也就是说，为自己节省一点时间并使用预先构建的菜单脚本，而不是尝试重新发明轮子。无论如何，不​​要觉得你必须使用我的 - 有数百种脚本可供选择。

于 2013-04-12T16:14:17.390 回答