두 번째 탐색이 첫 번째 탐색 위로 이동하는 이유

Question

디스플레이로 작업하고 있습니다. 인라인; 동일한 탐색 막대에서 두 개의 탐색에 대한 옵션을 다시 지정하십시오. 나는 이것들 중 하나를 해본 적이 있고 그것과 관련된 질문을 가지고있다. 그러나, 나는 두 번째 탐색이 첫 번째 (즉 "연락처"위에있는 문제 다 퉜다 것 같다 "홈"탭을 가리키면.

http://jsfiddle.net/x64qax1x/

나는 그것이 있어야합니다 생각 당신은. 당신은 또한 당신의 NAVS에 대해 동일한 id을 사용하고있는 문서의 흐름에서 당신의 탐색 소요 position: absolute을 사용하고 있기 때문에 때문에 NAVS 내 CSS 코드의 일부.

#nav-container { 

/* Spans the width of the page */ 
width: 100%; 
height: 56px; 
/* no space between sides of the screen and the menu */ 
margin: 0; 
/* Makes sure that your menu remains on top of other page elements */ 
z-index: 99; 
position: relative; 
background-color: #366b82; 

} 

#nav { 

height: 50px; 
    padding: 0; 
margin: 0; 
/* Ensures that the menu doesn’t affect other elements */ 
position: absolute; 
border-right: 1px solid #54879d 
} 

#nav li { 

height: auto; 
/* Each menu item is 150px wide */ 
width: 150px; 
/* This lines up the menu items horizontally */ 
float: left; 
/* All text in the center of the box */ 
text-align: center; 
/* Removes the default (bullets)*/ 
list-style: none; 
font: normal bold 15px/1.2em Arial, Verdana, Helvetica; 
padding: 0; 
margin: 0; 
background-color: #366b82; 
display: inline; 

} 

#nav a { 

padding: 18px 0; 
/*light color effect to separate tabs */ 
border-left: 1px solid #54879d; 
/*dark color effect to separate tabs */ 
border-right: 1px solid #1f5065; 
text-decoration: none; /* Removes the default hyperlink styling. */ 
color: white; /* Text color is white */ 
display: block; 
} 
.text-left { 

float: left; 
padding-left: 30px; 
} 

.text-right { 

float: right; 
padding-right: 55px; 
} 

Answer 1

그것입니다. id을 수행 할 수 있습니다 한 페이지에서만 한 번만 사용할 수 있습니다.

FIDDLE

새 ID를 추가하고 두 번째 nav을 대상으로하고 top: 50px을 추가하여 아래로 이동하십시오. 하지만 여전히 호버링 문제가있을 것입니다.