Question

我已经使用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;
   }

提前致谢！

Answer 1

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

#nav li:hover ul, #nav li.hover ul {
    position: absolute;
    left: 0;
    display: inline;
    padding-top: 5px;
}

Answer 2

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

#navholder{
position: relative;
background-color: #594361;
margin: 0 auto;
width: 868px;
height: 25px;
font-family: P22, Helvetica, Arial, sans-serif;
 }

CSS水平下拉菜单定位

2 个答案: