수직 드롭 다운 메뉴를 만드는 방법

Question

여기에서 달성하고자하는 것은 요소의 수직 드롭 다운 메뉴 (ul) "fav 블로그"입니다. 나는 css를 조정하여 "fav 블로그"요소 바로 아래에 하위 메뉴 인 "rawrmerawr"과 "realfriennds"를 수직으로 내려 놓으려고했습니다.

내가 사용하는 CSS가 무엇이든 상관없이 나는 올바른 코드가 무엇인지 알아낼 수 없다. 내가 "여기에 똥이있다"요소 위에 마우스를 가져 가면 다른 ul (정렬되지 않은 목록)을 올바르게 버리지 만, "fav 블로그"위로 마우스를 가져 가면 그렇게하지 않습니다.

당신은 탐색 모음이 here

HTML 코드를 살펴 살고 볼 수 있습니다

<nav> 
<ul> 
    <li><a href="#">There's some shit here </a> 
     <ul> 
      <li><a href="#">fav blogs </a></li> 
       <ul> 

        <li><a href="http://rawrmerawr.tumblr.com/" target="_blank">sun&stars</a></li> 
        <li><a href="#" target="_blank">realfriennds</a></li> 

       </ul> 
      <li><a href="#">musicc</a></li> 
      <li><a href="#">only me!!</a></li> 
     </ul> 
    </li> 
</ul> 

CSS 코드에보기 :

nav { 
position: fixed; 
margin: 0 0 0 5px; 
} 

nav ul ul, ul ul ul li { 
display: none; 
} 

nav ul li:hover > ul { 
    display: block; 
    margin: 0 0 0 10px; 
} 

nav ul ul ul li:hover > ul { 
    display: block; 
    margin: 0 0 20px 20px; 
} 

Answer 1

HTML 구조가 잘못되었습니다. 하위 메뉴에 대한 <ul>는 다음과 같이 fav blogs의 <li> 안에 중첩되어야한다

<nav> 
<ul> 
    <li><a href="#">There's some shit here </a> 
     <ul> 
      <li><a href="#">fav blogs </a> 
        <ul> 
        <li><a href="http://rawrmerawr.tumblr.com/" target="_blank">sun&stars</a></li> 
        <li><a href="#" target="_blank">realfriennds</a></li> 
        </ul> 
      </li> 
      <li><a href="#">musicc</a></li> 
      <li><a href="#">only me!!</a></li> 
     </ul> 
    </li> 
</ul> 
</nav> 

이 CSS :

nav { 
    position: fixed; 
    margin: 0 0 0 5px; 
} 

nav>ul>li>ul>li:hover>ul { 
     display: block; 
     position: absolute; 
     margin-left: 50px; 
     margin-top: -12px; 
} 

nav>ul>li>ul { 
     display: none; 
} 

nav>ul>li>ul>li>ul { 
     display: none; 
} 

nav>ul>li:hover>ul { 
     display: block; 
     margin: 0 0 0 10px; 
}