Question

我正在使用显示器：内联;再次选择同一导航栏上的2个导航。我以前做过其中一个并且有一个与之相关的问题;然而，我似乎遇到了第二个导航位于第一个导航之上的问题（换句话说，＆＃34;联系人＆＃34;悬停在＆＃34; home＆＃34;标签上。

我认为这必定是因为导航的一些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以将其向下移动。但是你仍然会有悬停问题。

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

1 个答案: