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ですが、私はルートの<ul>のHTMLに1つのクラスしか使用していないことに注意してください。これを自分でテストし、任意のレベルで任意の数のネストされたリストを追加してください！