html - 使 CSS 菜单水平

Question

我有这个 CSS 菜单，但我需要让它水平而不是垂直

我这里有一个 fiddle ，所以你可以看一个例子:http://jsfiddle.net/WLwxx/1/

这是我使用的 CSS 代码:

    .vertical-nav{
    height:auto;
    list-style:none;
width: 30%;
margin: 20px 0 0 0;
}
.vertical-nav li{
height: 25px;
margin: 0;
padding: 5px 0;
background-color: #666;
border: none;
text-align: center;
display: inline-block;
float: left;
width: 100%;
}
.vertical-nav li:hover{
    background-color:#f36f25;
    color:#FFFFFF;
}
.vertical-nav li a{
    font-family:Calibri, Arial;
    font-size:18px;
    font-weight:bold;
    color:#ffffff;
    text-decoration:none;
}
.vertical-nav li.current {
    background-color:#F36F25;
}
.vertical-nav li.current a {
    color:#FFFFFF;
}

vertical-nav ul li ul{
    display:none;
    list-style-type:none;
    width:125px;
    padding:0px;
    margin-top:3px;
    margin-left:-5px;
}
vertical-nav ul li:hover ul{
    display:block;
}
vertical-nav ul li:hover ul li{
    background-color:#555555;
    width:125px;
    height:30px;
    display:inline-block;
}
vertical-nav ul li ul li:hover{
    background-color:#333333;
}
vertical-nav ul li ul li a{
    color:#FFF;
    text-decoration:underline;
}
vertical-nav ul li ul li a:hover{
    text-decoration:none;
}

.vertical-nav li ul {
    display: none;
    margin-top: 6px;
    padding: 0;
}

.vertical-nav li:hover ul {display: block;}

有什么想法可以实现吗？

Answer 1

http://jsfiddle.net/isherwood/WLwxx/7

.vertical-nav {
    width: 400px;
}
.vertical-nav li {
    width: 200px;
}

您可能必须根据自己的情况微调样式，但这解决了主要问题，即您的列表项是全 Angular 的。