Wordpress下拉导航菜单

Question

我的下拉菜单需要帮助。

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

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

这是我的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;}

Answer 1

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

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

Answer 2

您提到的行实际上会影响您的菜单。除非你想展示，否则不要使用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>