Wordpress 下拉导航菜单答案

【问题标题】：Wordpress Dropdown Navigation menuWordpress 下拉导航菜单
【发布时间】：2016-09-14 08:06:34
【问题描述】：

我的下拉菜单需要帮助。

我想要实现的是隐藏我的子菜单以及我的子子菜单。此外，我希望子列表项仅在我将鼠标悬停在我想要的列表项上时才显示。

提前谢谢你。非常感谢您的帮助！

这是我的 CSS：

 #access ul ul a { color: #fff;  }
 #access { position:relative; float:left; height:19px; margin-left:15px; }
 #access ul {list-style-type:none; margin:0px; padding:0px;}
 #access li {float: left;position: relative; }
 #access a {     height:19px; display: block; padding:3px 15px 0 15px; text-      decoration: none;font-size: 14px; font-family:'LeagueGothicRegular'; color: #ffffff;}
 #access ul ul { display: none;  float: left;    margin: 0;      position:    absolute;     top: 10px;      left: 0; width: 150px;  z-index: 99999; }
 #access ul ul ul {      left: 100%;     top: 0; }
 #access ul ul a {
    margin-top:1px;
    background: #000000;
    color: #ffffff;
    font-size: 14px;
    font-weight: normal;
    height: 19px;
    line-height: 1.4em;
    padding:2px 15px 0 15px;
    width: 157px;
    text-decoration: none; font-family:'LeagueGothicRegular', Abadi MT Condensed , Charcoal, sans-serif; color: #ffffff;}

 #access li a:hover { color: #ed1c24; }
 /* I believe HERE is the problem */
 #access li:hover ul  { display: block; color: #ffffff;}

 #access a:focus {color: #ed1c24;}
 #access .current_page_ancestor > a { color:#ed1c24;}

【问题讨论】：

标签： html css wordpress drop-down-menu navigation

【解决方案1】：

您提到的那一行确实会影响您的菜单。不要使用display:block，除非你想展示它，position:relative也可能会丢掉定位。

这是一个相当简单的解决方案。您将不得不更改类以使用 wordpress 使用的类。我目前没有可以用来提供更多帮助的副本。

ul.menu {
  background:#222;
  color:#FFF;   
  padding:0;
  margin:0;
}

ul.menu a { 
  text-decoration:none;
  display:inline-block; 
  padding: 10px; 
  color:inherit; 
}

ul.menu li { 
  display:inline-block;
  position:relative;
}

ul.menu li:hover { 
  background:#777;
  color:#00F;
}

ul.menu > li.submenu > ul.menu {
  display:none;
  position:absolute;
  top:100%;
  left:0;
}

/* For submenus put them on the right side */
ul.menu > li.submenu > ul.menu ul.menu  {
  display:none;
  position:absolute;
  top:0;
  left:100%;
}

ul.menu > li.submenu:hover ul.menu,
ul.menu > li.submenu li.submenu:hover ul.menu {
  display:block;
}

<ul class="menu">
  <li class="submenu"><a href="#">Test</a>
    <ul class="menu">
      <li class="submenu"><a href="#">Test 2</a>
        <ul class="menu">
          <li><a href="#">Test 3</a>
        </ul>
      </li>
    </ul>
  </li>
</ul>

【讨论】：

【解决方案2】：

我设法解决了我的问题。这对我有用。

 #access ul li:hover > ul {
    display: block;
 }

【讨论】：