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>) 만 사용했음을 유의하십시오. 직접 테스트 해보고 어느 레벨에서든 중첩 목록을 원하는만큼 추가하십시오!