html - 为什么第二个导航移动到第一个导航之上

Question

我正在使用 display: inline;再次选择同一导航栏上的 2 个导航。我以前做过其中一个，并且有一个与之相关的问题；但是，我似乎遇到了第二个导航位于第一个导航之上的问题(换句话说，“联系人”悬停在“主页”选项卡上。

http://jsfiddle.net/x64qax1x/

我认为这一定是由于我的一些导航 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

这是因为您使用的是 position: absolute，它使您的导航脱离了文档流。您还为导航使用相同的 id。 id 在一个页面上只能使用一次。

FIDDLE

添加新 ID，定位第二个导航并添加 top: 50px 将其向下移动。但是您仍然会遇到悬停问题。