단지

2012-07-07 4 views
0

내가이 CSS 메뉴가 기본 메뉴 항목처럼 보이도록 탐색 메뉴 드롭 다운 받기 :단지

http://jsfiddle.net/7JC8t/

당신이 'inostranstvo'위에 마우스를 가져 가면 당신은 그 아래 열린 드롭 다운을 볼 수 있습니다. 내가하려고했지만 실패한 것은 드롭 다운 항목을 가로 메뉴의 항목처럼 보이게하는 것입니다.

그래서 사용자가 'inostranstvo'를 가리키면 표시되는 항목은 다음과 같아야합니다 : 기존 메뉴 항목과 동일한 너비 (가장 넓은 항목의 너비), 동일한 높이 및 배경.

배경은 쉽지만 높이를 조절할 수 없으며 폭을 정렬하는 방법을 모르겠습니다. 이것은 아무것도하지 않습니다

#nav li:hover ul li{ 
    height:55px; 
    line-height:55px; 
    width:200px; 
} 

폭 값은 무작위, 무엇을 가장 중요한 것은 내가 목록 항목에 강제로 보일 수 없다 높이입니다. 반면에 테두리를 추가하면 작동하지만 빨간색 배경 영역에 테두리가 추가됩니다. 나는 이것이 복잡 할 수는 없다고 확신하지만, 나는 그것을 이해할 수 없다.

답변

1

하위 메뉴 요소를 "display-type : block"으로 설정하려고 했습니까?

나는 JSFiddle에 다음 CSS를 추가하고 그것을 작동하는 것 같다 :

#nav li:hover ul li { 
    display: block; 
    background: #DE2211; 
    border-bottom: 1px solid black; 
} 
+0

왜 업데이트 JSFiddle를 공유하지? ;-) –

+0

흠, 이제 항목을 올바르게 표시하지만 마우스를 아래로 움직이면 사라집니다. 그 어떤 해결책이라도? – jovan

+0

예! [link] (http://jsfiddle.net/7JC8t/12/) – dgl