2013-01-23 7 views
1

CSS 드롭 다운 메뉴에 간단한 문제가 있습니다. 드롭 다운 크기가 위에있는 버튼의 길이와 같도록하려고합니다. 아래 예제를 참조하십시오. 블록을 위 블록의 길이만큼 늘리고 싶습니다. 당신이 사용하는 경우CSS 드롭 다운 메뉴 크기 문제

새로운 사용자 이미지를

을 업로드 할 수 없습니다 내 jsFiddle link 당신이 내 코드를보고, 라이브 편집 할 수 있습니다. 어쨌든 코드를 게시하겠습니다. 참고 HTML은 문제의 일부가 아니므로 여기서는 CSS 스타일 시트 만 게시하고 있습니다.

/* Dropdown Menu */ 

#nav { 
float: right; 
width: 600px; 
height: 90px; 
margin: 0 auto; 
padding-top: 65px; 
} 

#nav ul { 
    font-family: Arial, Verdana; 
    font-size: 14px; 
    margin: 0; 
    padding: 0; 
    list-style: none; 
    float: right; 
} 
#nav ul li { 
    display: block; 
    position: relative; 
    float: left; 
} 
#nav li ul { display: none; } 
#nav ul li a { 
    display: block; 
    text-decoration: none; 
    color: #ffffff; 
    border-top: 1px solid #ffffff; 
    padding: 5px 15px 5px 15px; 
    background: #3636FE; 
    margin-left: 1px; 
    white-space: nowrap; 
} 
#nav ul li a:hover { background: #3636FE; } 
#nav li:hover ul { 
    display: block; 
    position: absolute; 
} 
#nav li:hover li { 
    float: none; 
    font-size: 11px; 
} 
#nav li:hover a { background: #3636FE; } 
#nav li:hover li a:hover { background: #6868FE; } 

답변

3

수정 됨. UL 및 #nav 리튬 에 가져 :

http://jsfiddle.net/QZWj3/4/

(적어도 크롬 + 파이어 폭스 + IE9에 대한) 당신은 width: 100%에 #nav 리튬 추가했다 호버 리

+0

완벽! 고마워, 나는 그것이 쉽다는 것을 알았지 만 CSS에 익숙하지 않다. :) –