Html CSS 菜单垂直显示，子菜单在右侧
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21086898/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS Menu to display vertically with sub menus to the right
提问by user2710234
I am using this CSS Code:
我正在使用这个 CSS 代码：
.vertical-nav {
height:auto;
list-style:none;
width: 100%; /******* 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: 100px; /******* 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: 10px;
padding: 0;
}
.vertical-nav li:hover ul {
display: block;
}
.vertical-nav li:hover .sub-menu
{
display: table;
}
.sub-menu li
{
width: 100%;
min-width: 180px;
white-space: nowrap;
display:table-row;
z-index:1;
position:relative;
}
.sub-menu li a
{
display:inline-block;
padding: 0 10px;
}
For my horizontal menu, How can I make the menu display vertically but also have the sub menus display out to the right of each link on hover?
对于我的水平菜单，如何使菜单垂直显示，但也可以在悬停时在每个链接的右侧显示子菜单？
Please check Fiddle here
请在此处检查小提琴
回答by Filip Huysmans
Try the code in this fiddle:
试试这个小提琴中的代码：
I Changed:
我变了：
.vertical-nav li:hover .sub-menu
{
position: relative;
margin-top: -27px;
}
.sub-menu li
{
position: relative;
display: block;
top: 0;
left: 100%;
width: 100%;
min-width: 180px;
white-space: nowrap;
z-index:1;
}
this makes the submenu float to right of the menu. Making the position relative is a crucial part. With the margin-top it is aligned to the correct menu item.
这使子菜单浮动到菜单的右侧。使位置相对是一个关键部分。使用 margin-top 它与正确的菜单项对齐。
Cheers
干杯
回答by Zword
Use the following:
使用以下内容：
HTML
HTML
<ul class="vertical-nav">
<li><a href="">Link 1</a></li><br/>
<li class="second"><a href="">Link 2</a></li>
<ul class="sub-menu">
<li><a herf="">Sub Link 1</a></li><br/>
<li><a href="">Sub Link 2</a></li>
</ul>
</ul>
CSS
CSS
.vertical-nav{
list-style:none;
margin:0px;
padding:0px;
}
.vertical-nav li{
padding-top:15px;
padding-bottom:15px;
display:inline-block;
vertical-align:top;
}
.vertical-nav li a{
background-color: #666;
padding:15px;
color:#ffffff;
font-family:Calibri, Arial;
font-size:18px;
font-weight:bold;
text-decoration:none;
}
.vertical-nav ul{
padding:1px;
display:none;
}
.vertical-nav li:hover a{
background-color:#f36f25;
color:#FFFFFF;
}
.vertical-nav .second:hover ~ .sub-menu{
display:inline-block;
}
Demo
演示
回答by Andrey Ciclicci
It is possible to create vertical menu with any deep using single universal style class for each level:
可以使用每个级别的单个通用样式类创建具有任何深度的垂直菜单：
https://jsfiddle.net/k8gy79tv/1/
https://jsfiddle.net/k8gy79tv/1/
CSS:
CSS：
nav ul {list-style-type: none; margin:0; padding:0; width: 200px; background-color: #f1f1f1; position: fixed;}
nav ul li {min-width: 200px; font-size:14px;}
nav ul li a {display: block; color: #000; text-decoration: none; padding: 16px 0 16px 16px;}
ul li:hover > a {color: white; background-color: #555;}
.dropdown-content {
min-width: 150px;
display: none;
left: 200px;
float:left;
position: absolute;
font-size:14px;
margin-top: -48px;
}
.dropdown-content a {
background-color: #fbfbfb;
color: black;
text-decoration: none;
display: block;
text-align: left;
padding: 16px 0 16px 16px;
}
.dropdown:hover > .dropdown-content {
display: inline-block;
}
HTML:
HTML：
<body>
<nav>
<ul>
<li class="dropdown"><a href="">Menu item 1</a>
<ul class="dropdown-content">
<li class="dropdown"><a href="">Menu item 11</a>
<ul class="dropdown-content">
<li class="dropdown"><a href="">Menu item 111</a>
<ul class="dropdown-content">
<li class="dropdown"><a href="">Menu item 1111</a>
<ul class="dropdown-content">
<li class="dropdown"><a href="">Menu item 11111</a>
</li>
<li>
<a href="">Menu item 11112</a>
</li>
<li>
<a href="">Menu item 11113</a>
</li>
<li>
<a href="">Menu item 11114</a>
</li>
</ul>
</li>
<li>
<a href="">Menu item 1112</a>
</li>
</ul>
</li>
<li>
<a href="">Menu item 112</a>
</li>
<li>
<a href="">Menu item 113</a>
</li>
</ul>
</li>
<li>
<a href="">Menu item 12</a>
</li>
<li>
<a href="">Menu item 13</a>
</li>
<li>
<a href="">Menu item 14</a>
</li>
</ul>
</li>
<li><a href="">Menu item 2</a></li>
<li class="dropdown"><a href="">Menu item 3</a>
<ul class="dropdown-content">
<li class="dropdown"><a href="">Menu item 31</a>
<ul class="dropdown-content">
<li class="dropdown"><a href="">Menu item 311</a>
<ul class="dropdown-content">
<li class="dropdown"><a href="">Menu item 3111</a>
<ul class="dropdown-content">
<li><a href="">Menu item 31111</a></li>
<li><a href="">Menu item 31112</a></li>
<li><a href="">Menu item 31113</a></li>
<li><a href="">Menu item 31114</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="">Menu item 312</a></li>
<li><a href="">Menu item 313</a></li>
<li><a href="">Menu item 314</a></li>
</ul>
</li>
<li><a href="">Menu item 32</a></li>
<li><a href="">Menu item 33</a></li>
<li><a href="">Menu item 34</a></li>
</ul>
</li>
<li><a href="">Menu item 4</a></li>
</ul>
</nav>
</body>
回答by Sven
I change a few styles to make it work, no rocketsince involved :)
我更改了一些样式以使其正常工作，因为不涉及火箭:)
Check out the fiddle: jsfiddle.net/GLORIEN/gWFeW/
查看小提琴：jsfiddle.net/GLORIEN/gWFeW/
I changed the main list-element from inline-block to block, removed the float:left and added position: relative:
我将主列表元素从 inline-block 更改为 block，删除了 float:left 并添加了 position: relative：
.vertical-nav li {
height: 25px;
margin: 0;
padding: 5px 0;
background-color: #666;
border: none;
text-align: center;
display: block;
position: relative;
width: 100px; /******* MODIFIED ********/
}
Removed the display: table-row:
删除了显示：表行：
.sub-menu li {
width: 100%;
min-width: 180px;
white-space: nowrap;
z-index:1;
position:relative;
}
The list sub-navigation becomes the position: absolute and top: 0 and left: 100%:
列表子导航变成 position: absolute 和 top: 0 和 left: 100%:
.vertical-nav li ul {
display: none;
padding: 0;
display: none;
padding: 0;
position: absolute;
top: 0;
left: 100%;
}
There a more changes in the fiddle but they not importend to what you want.
小提琴中有更多变化，但它们并没有达到您想要的效果。
-Sven
-斯文
回答by RononDex
You can simply add
你可以简单地添加
clear:both;
to your .vertical-nav listyle. This will make it vertical.
到你的.vertical-nav li风格。这将使其垂直。
I also moved your submenu to the correct position. For this I have added
我还将您的子菜单移到了正确的位置。为此，我添加了
top: -37px;
left: -20px;
to your .sub-menu listyle
你的.sub-menu li风格
Check this fiddle: http://jsfiddle.net/QdDmL/3/
检查这个小提琴：http: //jsfiddle.net/QdDmL/3/
回答by Anup
回答by Anima-t3d
This is my version of it fiddle
这是我的小提琴版本
This is what I've added:
这是我添加的内容：
.sub-menu{/* added */
position:absolute;
right:-95px;/* dependent on button size of main nav */
top:0;
}
Further more I removed the float:left;and the display:inline-block;on the lias you can see in commented code on the fiddle.
进一步我删除了float:left;与display:inline-block;上li你可以在摆弄注释代码见。
