Question

所以我正在努力教自己如何创建和自定义wordpress网站，我已经被困在这段代码上2天了。所以我在这里发帖，所以也许有人可以帮助我理解我做错了什么。我大约一两个星期前开始自学，所以这是我的一些知识背景。

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

我遇到的问题是我无法在CSS中设置样式，以便当您将鼠标悬停在顶部导航菜单中的页面上时子菜单会下降。这是我目前用于我遇到问题的seciton的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会帮助你，我建议你使用它，我唯一不喜欢的是使用后代选择器和使用{{ 1}}而不是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等的影响。

所以我的建议：使用迈克尔示例作为起点，但避免使用后代选择器不仅这不是性能，而且它很脆弱，因为对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

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

下拉子菜单问题

3 个答案: