請幫助改變水平CSS下拉菜單到垂直下拉菜單

Question

我有一個水平的CSS下拉菜單在這裏，從網上得到它。 我已經搜索了一整天如何將這個水平菜單轉換爲垂直下拉菜單。 以及如何製作子菜單。 所以，如果可能的話，請大家幫我解決。

這裏的CSS styles.css：

#cssmenu ul, 
#cssmenu li, 
#cssmenu span, 
#cssmenu a { 
    margin: 0; 
    padding: 0; 
    position: relative; 
} 
#cssmenu:after, 
#cssmenu ul:after { 
    content: ''; 
    display: block; 
    clear: both; 
} 
#cssmenu a { 
    color: #333333; 
    display: inline-block; 
    font-family: 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, Arial, Verdana, sans-serif; 
    font-size: 12px; 
    min-width: 35px; 
    text-align: center; 
    text-decoration: none; 
    text-shadow: 0 -1px 0 #eeeeee; 
} 
#cssmenu ul { 
    list-style: none; 
} 
#cssmenu > ul > li { 
    float: left; 
} 
#cssmenu > ul > li.active a { 
    background: #d9d9d9 url(images/grad_light.png) repeat-x left bottom; 
    background: -moz-linear-gradient(top, #d9d9d9 0%, #bfbfbf 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d9d9d9), color-stop(100%, #bfbfbf)); 
    background: -webkit-linear-gradient(top, #d9d9d9 0%, #bfbfbf 100%); 
    background: -o-linear-gradient(top, #d9d9d9 0%, #bfbfbf 100%); 
    background: -ms-linear-gradient(top, #d9d9d9 0%, #bfbfbf 100%); 
    background: linear-gradient(to bottom, #d9d9d9 0%, #bfbfbf 100%); 
    filter: progid:dximagetransform.microsoft.gradient(startColorstr='#d9d9d9', endColorstr='#bfbfbf', GradientType=0); 
    box-shadow: inset 0 0 10px #979797, inset 0 10px 10px #979797; 
    -moz-box-shadow: inset 0 0 10px #979797, inset 0 10px 10px #979797; 
    -webkit-box-shadow: inset 0 0 10px #979797, inset 0 10px 10px #979797; 
    filter: none; 
} 
#cssmenu > ul > li.active a:hover { 
    background: -moz-linear-gradient(top, #d9d9d9 0%, #bfbfbf 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d9d9d9), color-stop(100%, #bfbfbf)); 
    background: -webkit-linear-gradient(top, #d9d9d9 0%, #bfbfbf 100%); 
    background: -o-linear-gradient(top, #d9d9d9 0%, #bfbfbf 100%); 
    background: -ms-linear-gradient(top, #d9d9d9 0%, #bfbfbf 100%); 
    background: linear-gradient(to bottom, #d9d9d9 0%, #bfbfbf 100%); 
    filter: progid:dximagetransform.microsoft.gradient(startColorstr='#d9d9d9', endColorstr='#bfbfbf', GradientType=0); 
    filter: none; 
} 
#cssmenu > ul > li a { 
    box-shadow: inset 0 0 0 1px #ffffff; 
    -moz-box-shadow: inset 0 0 0 1px #ffffff; 
    -webkit-box-shadow: inset 0 0 0 1px #ffffff; 
    background: #bfbfbf url(images/grad_light.png) repeat-x left top; 
    background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 50%, #d7d7d7 51%, #ededed 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(50%, #e5e5e5), color-stop(51%, #d7d7d7), color-stop(100%, #ededed)); 
    background: -webkit-linear-gradient(top, #ffffff 0%, #e5e5e5 50%, #d7d7d7 51%, #ededed 100%); 
    background: -o-linear-gradient(top, #ffffff 0%, #e5e5e5 50%, #d7d7d7 51%, #ededed 100%); 
    background: -ms-linear-gradient(top, #ffffff 0%, #e5e5e5 50%, #d7d7d7 51%, #ededed 100%); 
    background: linear-gradient(to bottom, #ffffff 0%, #e5e5e5 50%, #d7d7d7 51%, #ededed 100%); 
    filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed', GradientType=0); 
    border-bottom: 1px solid #d2d2d2; 
    border-top: 1px solid #d2d2d2; 
    border-right: 1px solid #d2d2d2; 
    line-height: 34px; 
    padding: 0 35px; 
    filter: none; 
} 
#cssmenu > ul > li a:hover { 
    background: #ffffff url(images/grad_light.png) repeat-x left bottom; 
    background: -moz-linear-gradient(top, #d9d9d9 0%, #bfbfbf 50%, #b0b0b0 51%, #c7c7c7 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d9d9d9), color-stop(50%, #bfbfbf), color-stop(51%, #b0b0b0), color-stop(100%, #c7c7c7)); 
    background: -webkit-linear-gradient(top, #d9d9d9 0%, #bfbfbf 50%, #b0b0b0 51%, #c7c7c7 100%); 
    background: -o-linear-gradient(top, #d9d9d9 0%, #bfbfbf 50%, #b0b0b0 51%, #c7c7c7 100%); 
    background: -ms-linear-gradient(top, #d9d9d9 0%, #bfbfbf 50%, #b0b0b0 51%, #c7c7c7 100%); 
    background: linear-gradient(to bottom, #d9d9d9 0%, #bfbfbf 50%, #b0b0b0 51%, #c7c7c7 100%); 
    filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed', GradientType=0); 
    filter: none; 
} 
#cssmenu > ul > li:first-child a { 
    border-radius: 5px 0 0 5px; 
    -moz-border-radius: 5px 0 0 5px; 
    -webkit-border-radius: 5px 0 0 5px; 
    border-left: 1px solid #d2d2d2; 
} 
#cssmenu > ul > li:last-child a { 
    border-radius: 0 5px 5px 0; 
    -moz-border-radius: 0 5px 5px 0; 
    -webkit-border-radius: 0 5px 5px 0; 
} 
#cssmenu .has-sub:hover ul { 
    display: block; 
} 
#cssmenu .has-sub ul { 
    display: none; 
    position: absolute; 
    top: 36px; 
    left: -1px; 
    min-width: 100%; 
    text-align: center; 
    *width: 100%; 
} 
#cssmenu .has-sub ul li { 
    text-align: center; 
} 
#cssmenu .has-sub ul li a { 
    border-top: 0 none; 
    border-left: 1px solid #d2d2d2; 
    display: block; 
    line-height: 120%; 
    padding: 9px 5px; 
    text-align: center; 
} 

而這裏的HTML

<head> 
<link href="styles.css" rel="stylesheet" type="text/css"> 
</head> 

<body> 
<div id='cssmenu'> 
<ul> 
    <li class='active '><a href='index.html'><span>Home</span></a></li> 
    <li class='has-sub '><a href='#'><span>Products</span></a> 
     <ul> 
     <li><a href='#'><span>Product 1</span></a></li> 
     <li><a href='#'><span>Product 2</span></a></li> 
     </ul> 
    </li> 
    <li><a href='#'><span>About</span></a></li> 
    <li><a href='#'><span>Contact</span></a></li> 
</ul> 
</div> 
</body> 

Answer 1

通常你必須證明你嘗試了一些工作。但是我猜你對於那個CSS有什麼不知道。

你只需要修改你的CSS，添加此你的CSS後：

#cssmenu ul { 
    width:200px; 
} 

#cssmenu > ul > li { 
    float: none; 
} 
#cssmenu .has-sub ul { 
    top: -1px; 
    left: 200px; 
} 
#cssmenu a { 
    display: block; 
} 

#cssmenu .has-sub ul li a { 
    border-top: 1px solid #d2d2d2; 
} 

JSFiddle Example

Answer 2

請記住，HTML只包含的內容，而不是風格。這意味着您可以刪除CSS並留下一個無序列表，這對於任何類型的菜單都是很好的語義標記。從那裏開始，使用新的CSS將其構建到垂直菜單中，或者其他任何東西。如果你願意，你可以按照CSS教程來製作你想要的菜單類型，因爲任何教程都應該以與你的類似的HTML開始。

（雖然我們討論的語義，不過，我要指出的是所有的span S和包裝div是不必要的，並且可以沒有他們創建工作菜單。）