내비게이션 막대 내부 탭 위치 지정

Question

CSS 및 HTML을 사용하여 드롭 다운 탐색 바를 만들고 있습니다. 아래 이미지는 제가 성취하려고하는 일종의 것입니다. 내가 예제 이미지처럼 동일한 높이를 원하는 있지만 코드에서

, OuterTab1 및 OuterTab2 항상 Tab2보다 낮은. 나는 이것이 매우 명확 소리가 나지 않는다 알고

, 여기에서 확인하십시오 : http://jsfiddle.net/442xM/

<nav> 
    <ul> 
     <li>Tab1</li> 
     <li>Tab2 
      <ul> 
       <li>OuterTab1</li> 
       <li>OuterTab2</li> 
      </ul> 
     </li> 
    </ul> 
</nav> 

Answer 1

당신은 공중 선회 <li>에 (<ul>) 기준으로 절대 위치 하위 메뉴를 배치해야합니다. 그래서 <li>

li { 
    position:relative; /* add this*/ 
    vertical-align: top; 
    width: 100px; 
    height: 15px; 
    text-align: left; 
    background-color: black; 
    padding: 5px; 
} 

아래처럼 CSS

Demo

Answer 2

업데이트에 대한 position:relative;을 적용합니다. 요소 배치에 관한 모든 것.

.button { 
display: inline-block; 
text-align: center; 
} 
* { 
font-family: sans-serif; 
color: white; 
} 
nav { 
background-color: black; 
padding: 10px 0px 10px 0px; 
width: 452px; 
border-radius: 5px; 
} 
ul, ol { 
list-style-type: none; 
margin: 0px; 
padding: 0px; 
position: relative; 
} 
li { 
vertical-align: top; 
width: 100px; 
height: 15px; 
text-align: left; 
background-color: black; 
padding: 5px; 
position:relative; 
} 
li:hover { 
background-color: grey; 
} 
nav ul ul { 
display: none; 
text-align: left; 
position:absolute; 
left:0; 
top:100%; 
} 
nav ul li:hover > ul { 
display: block; 
} 
ul ul ul { 
position: absolute; 
width: 100px; 
left: 100%; 
top:0; 
z-index: 5; 
padding:0; 
margin:0; 
} 
.Arrow { 
float: right; 
} 

FIDDLE DEMO