드롭 다운 메뉴가 올바르게 지워지지 않음

Question

아주 간단한 드롭 다운 메뉴를 만들려고합니다. 나는 모든 li이 60px가되기를 원해. 드롭 다운 메뉴에 대한 몇 가지 자습서를 사용했지만 동일한 문제가 계속 발생합니다. 나는 'Drop 1'을 완전히 지우기 위해 'Link 1'을 얻을 수 없다. 앵커는 지우 겠지만 리는 지우지 않습니다.

http://jsfiddle.net/ZFWBU/12/

<nav> 

    <ul id="nav"> 

     <li><a href="#">Drop 1</a> 

      <ul> 
       <li><a href="#">Link 1</a></li> 
       <li><a href="#">Link 2</a></li> 
       <li><a href="#">Link 3</a></li> 
      </ul> 

     </li> 

     <li><a href="#">Drop 2</a> 
      <ul> 
       <li><a href="#">Link 1</a></li> 
       <li><a href="#">Link 2</a></li> 
       <li><a href="#">Link 3</a></li> 
      </ul> 
     </li> 

    </ul> 

</nav> 

CSS :

a { 
    color: #333; 
} 

nav { 
    width: 992px; 
    height: 50px; 
    margin: 0 auto; 

    border: 1px solid #ebebeb; 
    background: red; 
} 

#nav { 
    width: 992px; 
    margin: 0 auto; 
    line-height: 100%; 

} 

#nav li { 
    float: left; 
    position: relative; 
    list-style: none; 
} 


/* main level link */ 
#nav a { 
    width: 280px; 
    font-weight: bold; 
    color: #e7e5e5; 
    text-decoration: none; 
    display: block; 
    padding: 16px 20px; 
    margin: 0; 

    border: 1px solid white; 
} 

/* main level link hover */ 
#nav .current a, #nav li:hover > a { 
    background: blue; 
} 

/* level 2 list */ 
#nav ul { 
    display: none; 
    margin: 0; 
    padding: 0; 
    position: absolute; 
    top: 35px; 
    left: 0; 

    background: #f5f5f5; 
} 

/* dropdown */ 
#nav li:hover > ul { 
    display: block; 
} 

#nav ul li { 
    float: none; 
    margin: 0; 
    padding: 0; 
} 

#nav ul a { 
    font-weight: normal; 
} 

/* clearfix */ 
#nav:after { 
    content: ""; 
    display: block; 
    clear: both; 
    visibility: hidden; 
    line-height: 0; 
    height: 0; 
} 

#nav { 
    display: inline-block; 
} 

html[xmlns] #nav { 
    display: block; 
} 

* html #nav { 
    height: 1%; 
} 

Answer 1

이미이 선언에 top 속성을 설정하고, I가 그것을 조정 추가 50px 당신은 see on JSFiddle 일 수 있습니다. 코멘트에 pzin에서 언급 한 바와 같이

/* level 2 list */ 
#nav ul { 
    display: none; 
    margin: 0; 
    padding: 0; 
    position: absolute; 
    top: 50px; 
    left: 0; 
    background: #f5f5f5; 
} 

, 당신은 당신이 크기를 변경하면 나중에 편집 할 필요가 없습니다 top: 100%를 사용하여 미래의 문제를 줄일 수 있습니다.

Answer 2

업데이트 다음과 같은 스타일과 margin-top:15px;

#nav li:hover > ul { 
    display: block; 
    margin-top: 15px; 
} 

Answer 3

더 나은 솔루션은 li 요소의 전체 높이에 최고 위치를 설정됩니다, 그래서 당신은 언젠가을 변경하면 자동으로 자신을 맞는 때문에 나중에 편집을 필요하지 않습니다

#nav ul { 
    top: 100%; 
    [...] 
}