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的下拉菜單導航菜單

回答

相關問題