CSS 문제 탐색 드롭 다운 메뉴

Question

내 CSS는 메뉴의 첫 번째 수준에서 정상적으로 작동했습니다. 전혀 문제 없습니다. 드롭 다운/하위 메뉴를 추가하기 시작한 이래로 나는 모든 종류의 문제점을 가지고있었습니다.

제가 관리 할 수있는 가장 좋은 점은 주 메뉴 아래에 메뉴를 놓는 것입니다. 그러나 하위 메뉴는 세로 목록이 아닌 인라인으로 표시됩니다. 또한 메뉴와 하위 메뉴 블록은 내가 원하는대로 위로 올라가는 것처럼 보입니다. 높이를 네비게이션 컨테이너 내부의 모든 것에 상속 받도록 설정했지만 여전히 LI 구분선의 이상한 확장을 얻고 있습니다. codepen의 홈 메뉴 링크를 롤오버하면 무슨 뜻인지 알 수 있습니다. 나는 너무 오랫동안 이것에 관한 나의 두뇌를 고수하고 있었고, 정말로 내가 잃어 버렸던 지금 나의 코드에 매우 많은 다른 비틀기를 시도했기 때문에 그것을 보는 눈의 새로운 세트를 사용할 수 있었다. (참고 : 나는 Suckerfish의 아들에서이 드롭 다운 메뉴의 프레임 워크를 가지고 그것은 내가 적어도 여기까지 작동시킬 수있는 유일한 프레임 워크입니다..)

Code

Answer 1

당신은 추가 할 수 있습니다 이 :

#navigation ul ul li { 
    display: block; 
} 

배경 이미지가 렌더링되지 않으므로 코드가 올바르게 표시되지 않습니다. 또한 앵커의 너비가 내용에 따라 다르므로 앵커 오른쪽의 빨간색 테두리는 정렬되지 않습니다. 당신이 그것을 정렬하려는 경우 당신은 그걸로 바이올린을해야합니다.

Answer 2

너비 : 50px; ~ # navigate li a