CSS 메뉴 도움말 (두 번째 메뉴 사라짐)

Question

이 CSS 메뉴를 함께 넣으려고하지만 제대로 작동하지 않습니다. 톱 메뉴의 링크를 살펴볼 때 두 번째 메뉴가 사라지더라도 두 번째 메뉴가 열립니다. 게다가, 그것의 잘못 배치. 나는 왼쪽에 배치하지 수 : 0

http://tinyurl.com/7rxskdj

#menu {width:800px;background-color:#FFF;min-height:30px;border:0;border-top:2px solid #8BD2E4;padding:0 5px;margin:0 auto;} 
#nmenu {list-style:none;padding:0;margin:0;width:700px;} 
#nmenu li {display:inline;float:left;height:20px;margin-left:45px;position:relative;} 
#nmenu li.frst {margin-left:0} 
#nmenu li a {font: 11px/30px Tahoma, Geneva, sans-serif;text-decoration:none;color:#979598;letter-spacing:2px;font-weight:bold;text-transform:uppercase;} 
#smedia {width:100px;height:30px;float:left;} 
#fb, #tw, #pt {background: #FFF url(smedia.png) no-repeat center;width:16px;height:16px;display:block;float:right;margin:7px 3px;} 
#fb {background-position: -1px -1px;} 
#tw {background-position: -18px -1px;} 
#pt {background-position: -35px -1px;} 
#nmenu li ul {display:none;position:absolute;top:30px;left:0;border:1px solid red;background-color:#FFF;} 
#nmenu li:hover ul {display:block} 
#nmenu li ul li {float:left;width:100px;} 

Answer 1

는 아래 CSS를 시도 :

#nmenu li { 
    display: inline; 
    float: left; 
    margin-left: 44px; 
    position: relative; 
} 

#nmenu li ul { 
    background-color: #FFFFFF; 
    border: 1px solid red; 
    display: none; 
    left: -5px; 
    padding: 0; 
    position: absolute; 
    top: 30px; 
} 

#nmenu li a { 
    color: #979598; 
    display: block; 
    font: bold 11px/30px Tahoma,Geneva,sans-serif; 
    letter-spacing: 2px; 
    padding-left: 2px; 
    text-decoration: none; 
    text-transform: uppercase; 
} 

Answer 2

귀하의 절대 위치는 컨테이너 <li>과 <ul> 자식 요소 사이의 간격을 둡니다. #nmmenu li ul {}에서 "위쪽"값을 줄입니다.

Answer 3

li 안에 링크 항목 대신 목록 항목의 높이를 적용하고 있으므로 높이를 이동하고 메뉴 블록 높이와 일치하는 a 태그의 줄 높이를 적용한 다음 사라지는 메뉴를 해결하려면

CSS

#nmenu li a { 
    height:30px; 
    line-height:30px; 
    display:block; 
} 

#nmenu li ul { 
    top:100%; 
} 

Answer 4

: 간단히과 같이, 메뉴 항목에서 정확히 100 %를 표시하기 위해 하위 메뉴 위치를 변경을 제거하는 최상위 레벨의 앵커로 5px 하단에 패딩을 추가 요소들 사이의 갭.

'위치가 잘못됨'문제는 ul 및 li 요소의 기본 채우기 및 여백 때문입니다. 명시 적으로 여백과 여백을 설정하여 위치를 지정합니다.