CSS 메뉴 하이라이트 크기 불일치

Question

내 주요 가로 탐색에서 # main-nav라는 ​​컨테이너와 그 안에있는 앵커 태그 형태의 버튼이 있습니다. 앵커 태그 크기가 # main-nav 컨테이너와 일치하지 않아 그 이유를 알 수 없습니다.

아, 또한 드롭 다운 메뉴가 몇 픽셀보다 메뉴의 기준선에 더 높게 위치하는데, 이것이 관련되어 있는지 확실하지 않습니다.

현재 강조 표시가 있고 메뉴 막대와 똑같이 메뉴가 표시되어 문제를 가장합니다. 그러나 이것은 최적이 아닙니다.

내 사이트에 어떤 도움을 크게 감상 할 수 http://www.darkmatter-designs.com/

입니다 (A 코드 관리자가 문제를 명확하게 보여줍니다), 나는 아이디어가 부족했습니다.

Answer 1

사용 max-width 및 margin 0 auto이 탐색에 UL의 중심을

#main-nav ul { 
/* display: inline-block; */ 
    position: relative; 
    max-width: 960px; 
    margin: 0 auto; 
} 

CSS의 센터링 :

방금 ​​앵커는 "가을 중심으로"싶은 경우 :

#main-nav ul { 
    position: relative; 
    /* display: inline-block; */ 
    max-width: 960px; 
    margin: 0 auto; 
    text-align: center; 
} 

#main-nav ul li { 
    /* float: left; */ 
    display: inline-block; 
} 

당신이 #main-nav ul ul

#main-nav ul ul { 
    background: #1E344A; 
    position: absolute; 
    top: 100%; 
    z-index: 1; 
    padding-top: 3px;/*was added*/ 
} 

에 패딩 정상을 추가하고 ul ul에 절대 위치를 사용하고 있기 때문에이 같은 부모 요소에 position:relative를 추가 확인 할 수있는 드롭 다운을 픽스하려면 :

#main-nav ul li { 
    float: left; 
    position: relative;/*was added*/ 
}