WordPress的下拉菜单导航菜单

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

预先感谢您。非常感谢您的帮助！

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

来源

2016-05-18 BlueTree

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

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

来源

2016-05-18 04:15:56 BlueTree

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

来源

2016-05-18 03:10:03 MiltoxBeyond

WordPress的下拉菜单导航菜单

回答

相关问题