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

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

jQuery.validator.setDefaults()

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>

Wordpress下拉导航菜单

2 个答案: