下拉子菜单问题

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

在您的所有提示和帮助以及来自此video 的一些帮助之间，我成功地为该网站获得了一个功能强大且风格独特的下拉菜单！谢谢大家！

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

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