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水平下拉菜單定位

回答

相關問題