下拉菜单问题 sub-menu

Question

所以我正在尝试自学如何创建和自定义 wordpress 网站，我已经在这段代码上卡了 2 天了。所以我在这里发帖，这样也许有人可以帮助我理解我做错了什么。我大约一两周前才开始自学，所以这是我的一些知识背景。

好吧，我正在尝试创建一个导航菜单，该菜单位于 site-header 容器下方网页的 header 中。除了侧边栏小部件和页脚之外，主题不提供菜单位置。我已经设法通过主题文件为自定义菜单添加了一个新的主题位置。

我遇到的问题是我无法在 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

The jsfiddle of Michael comment 会帮助你，我推荐你使用它，我唯一不喜欢它的是使用 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 示例作为起点，但避免使用 后代选择器 这不仅性能不佳而且很脆弱，因为 HTML 可以很容易地破坏你的 CSS，最好简单地创建一个新的 CSS class 选择器，顺便说一句，你已经在 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

在您的所有提示和帮助以及此 video 的一些帮助之间，我成功地为该网站获得了一个功能齐全且样式齐全的下拉菜单！谢谢大家！

下拉菜单问题 sub-menu

Issue with dropdown sub-menu

html

css

wordpress

submenu

drop-down-menu