使css菜单子链接显示垂直而不是水平答案

【问题标题】：make css menu sub links display vertical rather than horizontal使css菜单子链接显示垂直而不是水平
【发布时间】：2013-08-27 18:49:25
【问题描述】：

我的水平菜单有这个 CSS：

.vertical-nav {
    height:auto;
    list-style:none;
    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;
    min-width: 125px;  /******* MODIFIED ********/
}
.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;
}

但是子菜单链接是水平显示而不是垂直显示...

更改 CSS 以使子链接垂直而不是水平显示的最佳方法是什么？

这里是菜单的 HTML：

<ul class="vertical-nav">
<li><a href="index.php">Link</a>
<ul class="sub-menu">
        <li><a href="index.php">Sub Link</a></li>
        <li><a href="index.php">Sub Link</a></li>
    </ul>
</li>
</ul>

【问题讨论】：

标签： html css

【解决方案1】：

.sub-menu li
{
    clear: both;
}

添加上面的 CSS。 DEMO

【讨论】：

就是这样 - 但如果我有一个长名称，则链接的整个宽度都会改变。 jsfiddle.net/9AT2D/3 - 有没有办法使父链接的宽度相同，但子菜单链接名称的宽度而不改变父链接的宽度
.vertical-nav {width: 200px; } 同样你可以改变宽度。
我现在已经这样做了 - jsfiddle.net/9AT2D/4 - 所以子菜单链接是 200 像素，但是如果名称更长会发生什么，因为它们是从 MySQL 数据库自动生成的。我可以做一个百分比吗？
.vertical-nav li { 宽度：200px; } 目前是最小宽度，设置宽度。
您能否将它作为一个不同的问题发布。给予 100% 只会扩展到父 div 的宽度。唯一的选择是根据内容自行调整。

【解决方案2】：

这样

DEMO

CSS

.vertical-nav {
    height:auto;
    list-style:none;
    width: 400px; /******* MODIFIED ********/
    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: 200px;  /******* MODIFIED ********/
}
.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;
}

【讨论】：