對齊下拉菜單的CSS

我目前正在研究一個純CSS的多級下拉菜單，我不能爲我的生活弄清楚如何讓下拉菜單自動對齊到父菜單的左側。對齊下拉菜單的CSS

這裏是一個屏幕截圖

Click to see Drop-down screenshot

這裏是CSS

/*---------HEADER MENU---------*/ 
#header .content ul.menu li ul{ 
    display: none; 
    margin: 0; 
    float: left; 
    padding: 0; 
    position: absolute; 
    z-index: 200; 
} 
#header .content ul.menu li ul li{ 
position: relative; 
top: 20px; 
margin: 0; 
} 
#header .content ul.menu li:hover > ul{ 
display: inline; 
float: left; 
width: 125px; 
} 

#header .content ul.menu li ul li li{ 
width: 125px; 
float: left; 
position: absolute;} 

/*---------VISITORS MENU---------*/ 
#block-menu-menu-visitors .content ul.menu{ 
    z-index: 200; 
} 
#block-menu-menu-visitors .content ul.menu li{ 
padding: 2px 15px 2px 15px; 
display: inline-block; 
float: left; 
background-color: #ffff90; 
} 

#block-menu-menu-visitors .content ul.menu li:hover{ 
padding: 2px 15px 2px 15px; 
float: left; 
display: inline-block; 
background-color: #ffffaa; 
}

這裏是HTML/PHP

這使任何「報頭」元件I具有（在此情況下爲菜單）下的主菜單部分的權利。

任何幫助或推動正確的方向將有所幫助！謝謝

來源

2012-07-02 Jeff

您是否試過'left：0px;'或者不同的'display：'值也許？ – poepje

是的，我嘗試了這兩件事情，但它並沒有使它工作 – Jeff

你能提供頁面的HTML嗎？ –

我想......

#header .content ul.menu li:hover > ul{ 
display: block; 
float: left; 
width: 125px; 
}

可能會奏效。如果不添加html，我可以給你正確的答案。本。

來源

2012-07-02 14:57:29

我會開始試圖將list-style-type: none;添加到列表項，因爲這將刪除這些元素具有的自然縮進。

來源

2012-07-02 14:22:10

對齊下拉菜單的CSS

回答

相關問題