CSS水平下拉菜单定位

我使用CSS在下拉显示为一个水平行，而不是一个垂直列表中创建一个下拉菜单。我唯一的问题是下拉菜单与菜单的其余部分不一致。我希望它与导航栏的左侧齐平。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; 
    }

由于时间提前！

来源

2013-03-28 Kristin Shoffner Tanner

左边：0应该是无论你的利润是多少。这很可能导致错误 – NoLiver92

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

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

来源

2013-03-28 22:30:30 sinanakyazici

非常感谢！我觉得这很简单。我仍然在学习所有。 –

当你徘徊在您指定左为0像素名单上时，aligining页面左侧定义UL，将其更改为你的页边距那么这将是在正确的地方

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

来源

2013-03-28 22:30:09 NoLiver92

CSS水平下拉菜单定位

回答

相关问题