풀다운 메뉴의 하위 메뉴

Question

이 여기에 있습니다.

필요에 따라!

http://jsfiddle.net/U99Br/

그래서 지금은 모든 좋은 때까지, 드롭 다운 메뉴와이 웹 사이트를 만드는,하지만 내 드롭 다운 메뉴를하는 동안거야 (나는 무언가를하고 싶었다 넷플 릭스의 메뉴 종류), 내 서브 메뉴가 "연락처" li 태그 300px 떨어져 (어떤 길이인지) 밀고 있다고 나타났습니다. 내가 아직 코딩에 문제가 있는지

#menu, 
#menu ul, 
#menu li { 
margin: 0; 
padding: 0; 
list-style: none; 
} 

#menu a { 
text-decoration: none; 
    } 

#menu { 
height: 60px; 
width: auto; 
    } 

#menu > ul > li { 
float: left; 
margin-left: 15px; 
position: relative; 
    } 

#menu > ul > li > a { 
color: #fff; 
text-shadow: 1px 1px 5px #737373; 
font-size: 20px; 
line-height: 60px; 
padding: 15px 20px; 
    } 

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

#menu > ul > li > ul { 
opacity: 0; 
visibility: hidden; 
display: none; 
background-color: #fff; 
text-align: left; 
height: auto; 
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4); 
width: 300px; 
    } 

#menu > ul > li:hover > ul { 
display: block; 
border: none; 
visibility: visible; 
opacity: 1; 
    } 

#menu > ul > li > ul > li { 
display: block; 
content: ''; 
    } 

#menu > ul > li > ul > li > a { 
font-size: 12px; 
color: #000; 
display: block; 
text-shadow: none; 
    } 

#menu > ul > li > ul > li > a:hover { 
color: #0AB3FC; 
    } 

#menu > ul ul > li { 
    position: relative; 
} 

를 발견하지 않았습니다 :

여기 내 코드입니다!

Answer 1

광고 최초 UL 리튬에 대한 폭 아이들은 스크린 샷보다 훨씬 더 좋을 것이다 HTML 소스를 제공하는 부모

#menu > ul > li { 
    width:300px; /* add with here */ 
    float: left; 
    margin-left: 15px; 
    position: relative; 
}