0

我使用 css 创建了一个下拉菜单，其中下拉菜单显示为水平行而不是垂直列表。我唯一的问题是下拉菜单与菜单的其余部分不一致。我希望它与导航栏的左侧齐平。

该页面位于以下地址：http ://concept82.com/CBHweb/index2.html

我的下拉菜单的代码是：

#navholder{
background-color: #594361;
margin: 0 auto;
width: 868px;
height: 25px;
font-family: P22, Helvetica, Arial, sans-serif;
 }
#nav {
    margin: 1px;
    padding: 0px;
}
#nav li {
   list-style: none;
   float: left;
}
#nav li a {
    display: block;
    color: #FFFFFF;
    font-size: 14px;
    text-align: center;
    margin-top: 5px;
    text-transform: uppercase;
    text-decoration: none; 
    letter-spacing: 3px;
    width: 140px;
}
#nav li a:hover {
   color: #201E30;
}
#nav li ul {
   display: none;
}
#nav li ul a{
    width: auto;
    font-size: 11px;
}
#nav li:hover ul, #nav li.hover ul {
   position: absolute;
   left: 0;
   display: inline;
   padding-top: 5px;
}
#nav li:hover li, #nav li.hover li {
    float: left;
    display: block;
    text-decoration: none;
    color: #594361;
    font-size: 11px;
    border-right: 1px solid #594361;
    padding: 0px 15px 0px 15px;
    margin-top: 3px;
    margin-bottom: 3px;
    white-space: nowrap;
 }
 #nav li.first, #nav li.hover li.first {
    float: left;
    display: block;
    text-decoration: none;
    color: #594361;
    font-size: 11px;
    border-left: 1px solid #594361;
    padding: 2px 15px 2px 5px;
    margin-top: 3px;
    white-space: nowrap;

}
#nav li:hover li a, #nav li.hover li a {
   color: #201E30;
   background-color: #FFFFFF;
   }
#nav li li a:hover {
   color: #201E30;
   }

提前谢谢！

4

2 回答 2

0

当您将 ul 悬停在您指定 left 为 0 px 的列表上时定义 ul 时，将其对齐到页面的左侧，将其更改为您的边距宽度，然后它将在正确的位置

#nav li:hover ul, #nav li.hover ul {
    position: absolute;
    left: 0;
    display: inline;
    padding-top: 5px;
}
于 2013-03-28T22:30:09.023 回答
0

您应该将#navholder的位置更改为相对位置。

#navholder{
position: relative;
background-color: #594361;
margin: 0 auto;
width: 868px;
height: 25px;
font-family: P22, Helvetica, Arial, sans-serif;
 }
于 2013-03-28T22:30:30.460 回答