CSS3의 세로 정렬

Question

하위 메뉴가있는 탐색 메뉴를 만들려고합니다. 하지만 부모 메뉴의 하위 메뉴를 가져 와서 링크를 정렬하는 데 막혔습니다.

내 HTML 내가 잘못 어디로 갔는지 아무도 말해 줄 수 있다면 해주세요

.MenuContainer { 
    width:100%; 
    height:50px; 
    border:1px solid; 
    position:relative; 
} 

ul { 
    margin:0; 
    padding:0; 
} 

/*Main menu*/ 
li.menu { 
    height:50px; 
    float:left; 
} 

ul.menu li { 
    list-style:none; 
    float:left; 
    height:49px; 
    text-align:center; 
} 

ul.menu li a { 
    display:block; 
    padding:0 20px; 
    text-align:center; 
    font-size:17px; 
    line-height:49px; 
    text-decoration:none; 
    color:#5d5d5d; 
} 

ul.menu li:hover > a { 
    color:#fdfdfd; 
} 

ul.menu li:hover > ul { 
    display:block; 
} 

/*sub menu*/ 
li.sub { 
    height:40px; 
    float:left; 
} 

ul.sub li { 
    list-style:none; 
    float:left; 
    height:39px; 
    text-align:center; 
} 

ul.sub li a { 
    display:block; 
    padding:0 20px; 
    text-align:center; 
    font-size:17px; 
    line-height:39px; 
    text-decoration:none; 
    color:#5d5d5d; 
} 

<!-- navigation menu --> 
<div class="MenuContainer"> 
     <ul class="menu"> 
       <li><a href="#">Home</a></li> 
       <li><a href="#">About</a></li> 
       <li> 
         <a href="#">Projects</a> 
         <ul class="sub"> 
           <li><a href="#">Project1</a></li> 
           <li><a href="#">Project2</a></li> 
           <li><a href="#">Project3</a></li> 
         </ul> 
       </li> 
     </ul> 
</div> 

내 CSS. 처음부터 처음으로 만들려고합니다.

또한 좋은 HTML5/CSS3 포럼/포럼을 아는 사람이라면 언제든지 링크를 게시하시기 바랍니다. 나는 일부를 찾으려고 노력했지만 모두 심각하거나 활동적인 사용자가 아닙니다.

또한이 stackoverflow 내 첫 번째 게시물을 그래서 여기에 초보자 실수 할 경우 그냥 지적하십시오.

미리 감사드립니다.

Answer 1

이봐 난 당신이 position relative 및 하위 UL은 position absolute

.sub{ 
position:absolute; 
} 


ul.menu li { 
    position:relative; 
} 

라이브 데모를주는 일 수업을 할 생각http://jsfiddle.net/HVk4G/

---

수직 메뉴 업데이트 데모는 http://jsfiddle.net/HVk4G/1/