下拉子菜单问题
Posted
技术标签:
【中文标题】下拉子菜单问题【英文标题】：Issue with dropdown sub-menu 【发布时间】：2015-11-08 08:31:02 【问题描述】：所以我正在尝试自学如何创建和自定义 wordpress 网站，我已经被这段代码困住了 2 天。所以我在这里发帖，所以也许有人可以帮助我理解我做错了什么。大约一两个星期前我才开始自学，所以这是我的一些知识背景。
我正在尝试创建一个导航菜单，该菜单位于站点标题容器下方的网页标题中。除了侧边栏小部件和页脚之外，该主题不提供菜单位置。我已经设法通过主题文件为自定义菜单添加了一个新的主题位置。
我遇到的问题是我无法在 CSS 中设置样式，因此当您将鼠标悬停在顶部导航菜单中的页面上时子菜单会下拉。这是我目前遇到问题的部分的 html 和 CSS：
.top-menu
.top-menu ul
list-style-type: none;
overflow: hidden;
width: 900px;
margin: 0px auto;
;
.top-menu ul li
width: 175px;
height: 50px;
float: left;
.top-menu ul li.current-menu-item
background: blue
.top-menu ul li:hover
background: red
.top-menu ul a
font: 20px Cantarell, Arial, sans-serif;
color: #000;
display: block;
width: 175;
height: 50px;
line-height: 50px;
text-decoration: none;
text-align: center;
.top-menu ul ul
display: none;
position: absolute;
top: 100%;
left: 0;
background: #fff;
padding: 0
.top menu ul ul li
float: none;
width: 200px;
.top menu ul ul a
line-height: 120%;
padding: 10px 15px
<div class="top-menu">
<ul id="menu-header" class="menu">
<li id="menu-item-28" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-28"><a href="http://notmymamaskitchen.com/home/">Home</a>
</li>
<li id="menu-item-29" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-29"><a href="http://notmymamaskitchen.com/about/">About</a>
</li>
<li id="menu-item-27" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-27"><a href="http://notmymamaskitchen.com/recipes/">Recipes</a>
<ul class="sub-menu">
<li id="menu-item-51" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-51"><a href="http://notmymamaskitchen.com/category/appetizers-snacks/">Appetizers & Snacks</a>
</li>
<li id="menu-item-52" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-52"><a href="http://notmymamaskitchen.com/category/breads/">Breads</a>
</li>
<li id="menu-item-53" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-53"><a href="http://notmymamaskitchen.com/category/breakfast/">Breakfast</a>
</li>
</ul>
</li>
<li id="menu-item-25" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-25"><a href="http://notmymamaskitchen.com/contact/">Contact</a>
</li>
</ul>
</div>请帮忙！，我的头发快用完了：/
PS。这是我在这个网站上提出的第一个问题。
【问题讨论】：
这是我最近为另一个答案创建的干净、简单的下拉菜单。看看它是如何工作的。希望它有所帮助。 jsfiddle.net/hp67rvfc 【参考方案1】：在您的所有提示和帮助以及来自此video 的一些帮助之间，我成功地为该网站获得了一个功能强大且风格独特的下拉菜单！谢谢大家！
【讨论】：
【参考方案2】：您必须在父项的:hover 上启用子菜单：
.top-menu ul li:hover > ul
display: block;
.top-menu ul
list-style-type: none;
width: 900px;
margin: 0px auto;
position: relative;
.top-menu ul li
width: 175px;
height: 50px;
float: left;
.top-menu ul li.current-menu-item
background: blue
.top-menu ul li:hover
background: red
.top-menu ul a
font: 20px Cantarell, Arial, sans-serif;
color: #000;
display: block;
width: 175;
height: 50px;
line-height: 50px;
text-decoration: none;
text-align: center;
.top-menu ul ul
display: none;
position: absolute;
background: #fff;
padding: 0
.top-menu ul ul li
float: none;
width: 220px;
.top-menu ul ul a
line-height: 120%;
padding: 10px 15px;
text-align: left;
.top-menu ul li:hover > ul
display: block;
<div class="top-menu">
<ul id="menu-header" class="menu">
<li id="menu-item-28" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-28"><a href="http://notmymamaskitchen.com/home/">Home</a>
</li>
<li id="menu-item-29" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-29"><a href="http://notmymamaskitchen.com/about/">About</a>
</li>
<li id="menu-item-27" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-27"><a href="http://notmymamaskitchen.com/recipes/">Recipes</a>
<ul class="sub-menu">
<li id="menu-item-51" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-51"><a href="http://notmymamaskitchen.com/category/appetizers-snacks/">Appetizers & Snacks</a>
</li>
<li id="menu-item-52" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-52"><a href="http://notmymamaskitchen.com/category/breads/">Breads</a>
</li>
<li id="menu-item-53" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-53"><a href="http://notmymamaskitchen.com/category/breakfast/">Breakfast</a>
</li>
</ul>
</li>
<li id="menu-item-25" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-25"><a href="http://notmymamaskitchen.com/contact/">Contact</a>
</li>
</ul>
</div>【讨论】：
【参考方案3】：The jsfiddle of Michael comment 会帮助你，我推荐你使用它，我唯一不喜欢的是使用 Descendant Selectors 和使用opacity: 0 而不是@ 987654324@（我知道这是为了过渡，但这样你会在它下面显示菜单点）但总的来说这是一个很好的起点。
我只是想给你一些提示来帮助你理解它和另一个改进你的代码。
了解行为。
你有.top-menu ul ul display: none;，所以你的.sub-menu根本不会显示（对布局没有影响）所以我们使用它来展示它：
.menu-item
position: relative; /*with respect to this element sub-menu is positioned*/
color: #333;
.menu-item:hover .sub-menu
display: block; /*show the menu when you hover the li.menu-item*/
此时您应该看到菜单，但请注意您有 .top-menu ul overflow: hidden;，因此溢出被剪裁，其余内容将不可见，包括 .sub-menu 只需将其删除，现在您可以看到您的 @987654330 @ 但它的风格会有些湿润，因为它受到 .top-menu ul 、 .top-menu ul li 等风格的影响。
所以我的建议：使用 Michael 示例作为起点，但避免使用 Descendant Selectors 这不仅性能不佳而且很脆弱，因为对 HTML 的更改很容易破坏你的 CSS，它最好简单地创建一个新的 CSS 类选择器，顺便说一下，您已经在 html 中使用它们。
检查一下它会帮助你改进你的代码http://modernweb.com/2013/08/12/writing-better-css/?utm_source=html5weekly&utm_medium=email
【讨论】：
以上是关于下拉子菜单问题的主要内容，如果未能解决你的问题，请参考以下文章
如何将 Bootstrap 下拉子菜单设置为“dropup”
Bootstrap 3 是不是有下拉子菜单的官方类？ [复制]