Untermenü Dropdown in Wordpress

Question

Ich habe mein Untermenü ausgeblendet und CSS hinzugefügt, um das Dropdownmenü anzuzeigen, wenn Sie den Mauszeiger über den übergeordneten Menüeintrag bewegen.

Was ich tun möchte, ist das Untermenü Dropdown-Menü, wenn die übergeordnete Menüschaltfläche "angeklickt" wird anstelle von "schwebte" über.

Meine CSS ist:

.sub-menu { 
    display: none; 
} 

.shiftnav ul li:hover > ul { 

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

} 

Answer 1

I Made und Beispiel Hier HTML Codes:

#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

Sie fast die gleiche Sache mit li a:first-child:nth-last-child(x) { } erreichen können.

Hier ist ein quick example. Das Markup ist nur Ihre standardmäßige UL-Verschachtelung. Beachten Sie jedoch, dass ich nur eine Klasse im HTML-Code verwendet habe, und zwar im Stammverzeichnis <ul>. Testen Sie dies selbst, fügen Sie beliebig viele verschachtelte Listen auf jeder Ebene hinzu!