子菜單在Wordpress中下拉

Question

我隱藏了我的子菜單，並添加了css以顯示子菜單下拉菜單時懸停在父菜單項上。

我想要做的是當父菜單按鈕被「點擊」而不是「懸停」時，子菜單下拉。

我的CSS是：

.sub-menu { 
    display: none; 
} 

.shiftnav ul li:hover > ul { 

display: block; /* show sub menus when hovering over a parent */ 

} 

Answer 1

我做了和實例 下面是HTML代碼：

#demo { 
 
    margin: 30px 0 50px 0; 
 
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif; 
 
} 
 
#demo .wrapper { 
 
    display: inline-block; 
 
    width: 180px; 
 
    margin: 0 10px 0 0; 
 
    height: 20px; 
 
    position: relative; 
 
} 
 
#demo .parent { 
 
    height: 100%; 
 
    width: 100%; 
 
    display: block; 
 
    cursor: pointer; 
 
    line-height: 30px; 
 
    height: 30px; 
 
    border-radius: 5px; 
 
    background: #F9F9F9; 
 
    border: 1px solid #AAA; 
 
    border-bottom: 1px solid #777; 
 
    color: #282D31; 
 
    font-weight: bold; 
 
    z-index: 2; 
 
    position: relative; 
 
    -webkit-transition: border-radius .1s linear, background .1s linear, z-index 0s linear; 
 
    -webkit-transition-delay: .8s; 
 
    text-align: center; 
 
} 
 
#demo .parent:hover, 
 
#demo .content:hover ~ .parent { 
 
    background: #fff; 
 
    -webkit-transition-delay: 0s, 0s, 0s; 
 
} 
 
#demo .content:hover ~ .parent { 
 
    border-bottom-left-radius: 0; 
 
    border-bottom-right-radius: 0; 
 
    z-index: 0; 
 
} 
 
#demo .content { 
 
    position: absolute; 
 
    top: 0; 
 
    display: block; 
 
    z-index: 1; 
 
    height: 0; 
 
    width: 180px; 
 
    padding-top: 30px; 
 
    -webkit-transition: height .5s ease; 
 
    -webkit-transition-delay: .4s; 
 
    border: 1px solid #777; 
 
    border-radius: 5px; 
 
    box-shadow: 0 1px 2px rgba(0, 0, 0, .4); 
 
} 
 
#demo .wrapper:active .content { 
 
    height: 123px; 
 
    z-index: 3; 
 
    -webkit-transition-delay: 0s; 
 
} 
 
#demo .content:hover { 
 
    height: 123px; 
 
    z-index: 3; 
 
    -webkit-transition-delay: 0s; 
 
} 
 
#demo .content ul { 
 
    background: #fff; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    height: 100%; 
 
    border-bottom-left-radius: 5px; 
 
    border-bottom-right-radius: 5px; 
 
} 
 
#demo .content ul a { 
 
    text-decoration: none; 
 
} 
 
#demo .content li:hover { 
 
    background: #eee; 
 
    color: #333; 
 
} 
 
#demo .content li { 
 
    list-style: none; 
 
    text-align: left; 
 
    color: #888; 
 
    font-size: 14px; 
 
    line-height: 30px; 
 
    height: 30px; 
 
    padding-left: 10px; 
 
    border-top: 1px solid #ccc; 
 
} 
 
#demo .content li:last-of-type { 
 
    border-bottom-left-radius: 5px; 
 
    border-bottom-right-radius: 5px; 
 
}

<div id="demo"> 
 
    <div class="wrapper"> 
 
    <div class="content"> 
 
     <ul> 
 
     <a href="#"> 
 
      <li>Lorem ipsum dolor</li> 
 
     </a> 
 
     <a href="#"> 
 
      <li>Consectetur adipisicing</li> 
 
     </a> 
 
     <a href="#"> 
 
      <li>Reprehenderit</li> 
 
     </a> 
 
     <a href="#"> 
 
      <li>Commodo consequat</li> 
 
     </a> 
 
     </ul> 
 
    </div> 
 
    <div class="parent">Drop Down Parent 1</div> 
 
    </div> 
 

 
    <div class="wrapper"> 
 
    <div class="content"> 
 
     <ul> 
 
     <a href="#"> 
 
      <li>Lorem ipsum dolor</li> 
 
     </a> 
 
     <a href="#"> 
 
      <li>Consectetur adipisicing</li> 
 
     </a> 
 
     <a href="#"> 
 
      <li>Reprehenderit</li> 
 
     </a> 
 
     <a href="#"> 
 
      <li>Commodo consequat</li> 
 
     </a> 
 
     </ul> 
 
    </div> 
 
    <div class="parent">Drop Down Parent 2</div> 
 
    </div>

Answer 2

可以達到幾乎同樣的事情li a:first-child:nth-last-child(x) { }。

這是quick example。標記只是您的標準嵌套UL，但請注意，我只在HTML <ul>上使用了一個類。自己測試一下，在任何級別添加任意數量的嵌套列表！