下拉子菜单问题

Question

因此，我试图教自己如何创建和自定义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 &amp; 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。 这是我在此网站上提出的第一个问题。

Answer 1

Michael评论的jsfiddle会为您提供帮助，我建议您使用它，我唯一不喜欢的是使用Descendant Selectors和使用opacity: 0而不是display: none （我知道这是为了转换，但以此方式，您将在其下方显示菜单点），但总的来说，这是一个很好的起点。

我只想给您一些提示，以帮助您理解它，并提供一些改进代码的方法。

了解行为。

您有.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只是将其删除，然后您可以看到您的.sub-menu但它的样式会有些许泛滥，因为它受到样式.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

Answer 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 &amp; 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> 

Answer 3

在您提供的所有提示和帮助以及本视频提供的一些帮助之间，我成功地为网站成功获得了功能正常且样式丰富的下拉菜单！ 谢谢大家！