CSS 드롭 다운 메뉴 문제

Question

저는 워드 프레스 테마를 만들고 있는데 메뉴 코드화에 몇 가지 문제가 있습니다. 내 메뉴에는 하위 메뉴가 있지만 잘못된 방식으로 표시됩니다. 그리고 드롭 다운 메뉴와 같이 보이게하려면 어떻게해야할지 모르겠습니다. Here's the link to my site.

정말로 간단한 드롭 다운 메뉴에 CSS 코드 만 제공 하시겠습니까? 내 웹 사이트에서 하위 카테고리가있는 메뉴는 'TV 프로그램'이고 하위 카테고리는 '꽤 작은 거짓말', '부활'및 '쫓는 삶'입니다. 'Tv Shows'에서 드롭 다운하도록 CSS가 필요합니다.

이 링크

#menu { 
    height:55px; 
background-color: #000; 
    width:100%; 
top:0px; 
left:0px; 
z-index:101; 
text-align:center; 
text-transform:uppercase; 
position:relative; 
} 

.menulinks { 
float:right; 
} 

#menucontainer { 
    margin: 0 auto; 
    width:900px; 
    font-family: 'Open Sans', sans-serif; 
} 

#menucontainer a { 
color:#fff; 
} 

#menucontainer a:hover { 
color:#fff; 
} 

#menucontainer ul { 
list-style: none; 
padding:7px; 
color:#A4A4A4; 
} 

#menucontainer ul a { 
color:#848484; 
} 

#menucontainer li a { 
color:#848484; 
} 

#menucontainer li { 
display: inline; 
margin-right:3px; 
margin-left:3px; 
padding:3px; 
color:#848484; 
} 

Answer 1

시도해보십시오.

ul { 
 
    text-align: left; 
 
    display: inline; 
 
    margin: 0; 
 
    padding: 15px 4px 17px 0; 
 
    list-style: none; 
 
    border: 1px solid; 
 
} 
 
ul li { 
 
    display: inline-block; 
 
    margin-right: -4px; 
 
    position: relative; 
 
    padding: 15px 20px; 
 
    background: #fff; 
 
    cursor: pointer; 
 
} 
 
ul li:hover { 
 
    background: #262222; 
 
    color: #fff; 
 
} 
 
ul li ul { 
 
    padding: 0; 
 
    position: absolute; 
 
    top: 48px; 
 
    left: 0; 
 
    width: 150px; 
 
    -webkit-box-shadow: none; 
 
    -moz-box-shadow: none; 
 
    box-shadow: none; 
 
    display: none; 
 
    opacity: 0; 
 
    visibility: hidden; 
 
} 
 
ul li ul li { 
 
    background: #262222; 
 
    display: block; 
 
    color: #fff; 
 
    text-shadow: 0 -1px 0 #000; 
 
} 
 
ul li ul li:hover { 
 
    background: #a1a1a1; 
 
} 
 
ul li:hover ul { 
 
    display: block; 
 
    opacity: 1; 
 
    visibility: visible; 
 
}

<ul> 
 
    <li>Home</li> 
 
    <li>Menu1</li> 
 
    <li>Menu2 
 
     <ul> 
 
      <li>Sub Menu</li> 
 
      <li>Another Sub Menu</li> 
 
      <li>And Anthor Sub Menu</li> 
 
     </ul> 
 
    </li> 
 
    <li>Menu3</li> 
 
    <li>Menu4</li> 
 
</ul>

Answer 2

대답은 단지 CSS보다 더 내 CSS 코드입니다. HTMl이 둘 다 받아 들일 수 있도록 만들어야합니다. 보조 드롭 다운을 유발하려면 ul 태그 안에 ul 태그가 있어야합니다.

여기 정확히 내가 생각 찾고 무엇을위한 codepen 링크입니다 :

<h1>Simple Pure CSS Drop Down Menu</h1> 
<nav id="primary_nav_wrap"> 
<ul> 
    <li class="current-menu-item"><a href="#">Home</a></li> 
    <li><a href="#">Menu 1</a> 
    <ul> 
     <li><a href="#">Sub Menu 1</a></li> 
     <li><a href="#">Sub Menu 2</a></li> 
     <li><a href="#">Sub Menu 3</a></li> 
     <li><a href="#">Sub Menu 4</a> 
     <ul> 
      <li><a href="#">Deep Menu 1</a> 
      <ul> 
       <li><a href="#">Sub Deep 1</a></li> 
       <li><a href="#">Sub Deep 2</a></li> 
       <li><a href="#">Sub Deep 3</a></li> 
       <li><a href="#">Sub Deep 4</a></li> 
      </ul> 
      </li> 
      <li><a href="#">Deep Menu 2</a></li> 
     </ul> 
     </li> 
     <li><a href="#">Sub Menu 5</a></li> 
    </ul> 
    </li> 
    <li><a href="#">Menu 2</a> 
    <ul> 
     <li><a href="#">Sub Menu 1</a></li> 
     <li><a href="#">Sub Menu 2</a></li> 
     <li><a href="#">Sub Menu 3</a></li> 
    </ul> 
    </li> 
</ul> 
</nav> 

행운을 빕니다!