2012-07-04 73 views
0

我在這裏是我的水平菜單代碼。現在我想將其更改爲垂直菜單。我不知道該怎麼做。請幫助我如何去做。 我試着改變寬度但沒有發生。我沒有得到編輯<ul><li>標籤的位置以將其更改爲垂直。 請建議我將水平菜單更改爲垂直菜單

#menu { 
    background: url('../image/menu.png') repeat-x; 
    position: relative; 
    z-index: 1; 
    height: 34px; 
    clear: both; 
    padding: 0px 30px; 
    min-width: 900px; 
} 
#menu > ul.left { 
    float: left; 
} 
#menu > ul.right { 
    float: right; 
} 
#menu > ul { 
    position: relative; 
    margin: 0; 
    padding: 0; 
} 
#menu > ul ul { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    background: url('../image/transparent.png'); 
} 
#menu > ul a { 
    display: block; 
    color: #FFFFFF; 
    text-decoration: none; 
    padding: 5px; 
} 
#menu > ul > li + li { 
    background: url('../image/split.png') center left no-repeat; 
} 
#menu > ul .top, #menu > ul li li.sfhover { 
    padding: 10px 15px 9px 17px; 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 12px; 
    color: #FFFFFF; 
    text-align: center; 
} 
#menu > ul ul li { 
    padding: 2px; 
} 
#menu > ul .selected .top { 
    background: url('../image/selected.png') repeat-x; 
    color: #FFFFFF; 
} 
#menu > ul .selected:hover a.top, #menu > ul .sfhover a.top { 
} 
#menu > ul .parent { 
    background: url('../image/arrow-right.png') 95% center no-repeat; 
} 
#menu > ul li { 
    float: left; 
    list-style: none; 
} 
#menu > ul li ul { 
    position: absolute; 
} 
#menu > ul li li { 
    clear: both; 
} 
#menu > ul li ul a { 
    color: #FFFFFF; 
    height: 15px; 
    width: 145px; 
} 
#menu > ul li ul ul { 
    margin: -27px 0 0 157px; 
} 
#menu > ul li li:hover, #menu > ul li li.sfhover { 
    background: #333; 
    color: #000000; 
} 
+0

寬度刪除'float'風格 –

+0

@MyHeadHurts雅從中刪除#menu> UL李 – SVS

+0

我已刪除的浮動,但它不工作。 –

回答

0

我覺得在

#menu
min-width: 900px;
使您的導航停留在一個水平矩形。這似乎是你想讓你的網站響應?也許設定所希望的 最大寬度,有你的li元素有100%

+0

-1最小寬度沒有連接爲什麼菜單保持水平位置。 –

+0

嗯...也許我誤解了這個問題,但它似乎像尼古拉希望它是一個垂直側邊欄而不是一個水平菜單? 德克斯特,看着你的jsbin,改變最小寬度爲最大寬度:100px;例如開始一個垂直菜單的工作 – AnthonyS

+0

不,我已經將min ti max和li更改爲100%,仍然不是垂直菜單 –