化妆的CSS菜单子链接显示垂直而非水平

我有这个CSS我的水平菜单：化妆的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>

来源

2013-08-27 user2710234

.sub-menu li 
{ 
    clear: both; 
}

添加上面的CSS。 DEMO

来源

2013-08-27 10:49:25

多数民众赞成它 - 但如果我有一个长名称整个宽度的链接改变。 http://jsfiddle.net/9AT2D/3/ - 有没有办法使父链接的宽度相同，但子菜单链接名称的宽度而不改变父链接的宽度 – user2710234

.vertical-nav {width：为200px; }同样你可以改变宽度。 –

我已经这样做了 - http://jsfiddle.net/9AT2D/4/ - 所以子菜单链接是200px，但如果名称更长，会发生什么情况，因为它们是从MySQL数据库自动生成的。我可以使它成为一个百分比吗？ – user2710234

像这样

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; 
}

来源

2013-08-27 10:48:57 falguni

化妆的CSS菜单子链接显示垂直而非水平

回答

相关问题