Question

我正在使用此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;
}

对于我的水平菜单，如何使菜单垂直显示，但是在悬停时每个链接的右侧都会显示子菜单？

请查看小提琴here

Answer 1

尝试这个小提琴中的代码：

http://jsfiddle.net/QdDmL/5/

我改变了：

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

这使子菜单浮动到菜单的右侧。使职位相对是一个至关重要的部分。使用margin-top，它与正确的菜单项对齐。

干杯

Answer 2

您只需添加

即可

clear:both;

到您的.vertical-nav li风格。这将使它垂直。

我还将子菜单移动到了正确的位置。为此，我添加了

top: -37px;
left: -20px;

到你的.sub-menu li风格

检查这个小提琴：http://jsfiddle.net/QdDmL/3/

Answer 3

使用以下内容：

<强> 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

.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

Answer 4

可以使用单个通用样式类为每个级别创建任何深度的垂直菜单：

https://jsfiddle.net/k8gy79tv/1/

<强> 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：

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

Answer 5

DEMO

nav ul li {
    position: relative;
}
nav ul li:hover > ul {
    position: absolute;
    display: block;
    top: 0;
    left: 100%;
    background: #aaa;
}

Answer 6

这是我的版本fiddle

这是我添加的内容：

.sub-menu{/* added */
   position:absolute;
    right:-95px;/* dependent on button size of main nav */
    top:0;
}

我还删除了float:left;上的display:inline-block;和li，正如您在小提琴上的评论代码中所看到的那样。

Answer 7

我更改了一些样式以使其正常工作，但没有涉及摇滚乐队。）

查看小提琴：jsfiddle.net/GLORIEN/gWFeW/

我将主list-element从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 ********/
}

删除了display：table-row：

.sub-menu li {
    width: 100%;
    min-width: 180px;
    white-space: nowrap;  
    z-index:1;
    position:relative;
}

列表子导航变为位置：绝对和顶部：0和左：100％：

.vertical-nav li ul {
    display: none;
    padding: 0;
    display: none;
    padding: 0;
    position: absolute;
    top: 0;
    left: 100%;
}

小提琴中有更多变化，但它们并不会导致你想要的东西。

-Sven

CSS菜单垂直显示，右侧有子菜单

7 个答案:

Demo