将水平菜单更改为垂直菜单

Question

我在这里是我的水平菜单代码。现在我想将其更改为垂直菜单。我不知道该怎么做。请帮助我如何去做。 我试着改变宽度但没有发生。我没有得到编辑<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; 
} 

Answer 1

我觉得在

#menu

的

min-width: 900px;

使您的导航停留在一个水平矩形。这似乎是你想让你的网站响应？也许设定所希望的 最大宽度，有你的li元素有100％