Question

我有一个超级鱼子菜单，所有级别子菜单都垂直显示。我希望将第二级子菜单更改为水平显示，因为当我悬停第一级子菜单时，第一级第二级子菜单将完全阻止另一个第一级子菜单的视图。

我发现子菜单01的第二级01将完全阻止子菜单02。

将鼠标悬停在子菜单01上后，它将显示：

所以我根本无法获得子菜单02。

这是我的代码：

<li class="current"><a href="">Menu 01</a></li>
            <li><a href="">Menu 02</a></li>
            <li><a href="">Menu 03</a>
                <ul>
                    <li><a href="#">Sub Menu 01</a>
                            <ul>
                            <li><a href="">2nd level 01</a></li>
                            <li><a href="">2nd level 02</a></li>
                            <li><a href="">2nd level 03</a></li>
                            </ul>
                    </li>
                </ul>
            </li>
            <li><a href="">Menu 04</a>
                <ul>
                    <li><a href="#">Sub Menu 01</a>
                            <ul>
                            <li><a href="">2nd level 01</a></li>
                            <li><a href="">2nd level 02</a></li>
                            </ul>
                    </li>
                    <li><a href="">Sub Menu 02</a>
                             <ul>
                            <li><a href="">2nd level 01</a></li>
                            <li><a href="">2nd level 02</a></li>
                            </ul>
                    </li>
                </ul>
            </li>
                    <li><a href="">Menu 05</a>
                        <ul>
                             <li><a href="">Sub Menu 01</a></li>
                             <li><a href="">Sub Menu 02</a></li>
                                <li><a href="">Sub Menu 03</a></li>
                        </ul>
                    </li>
                        <li><a href="#">Menu 06</a>
                            <ul>
                                <li><a href="">Sub Menu 01</a></li>
                                <li><a href="">Sub Menu 02</a></li>

CSS：

    /* First level sub-menu styles
========================================================*/
.sf-menu ul {
padding: 14px 0 0 0;
width: 185px;
font: 400 14px/16px "Roboto", sans-serif;
position: absolute;
top: 78px;
left: 50%;
margin-left: -92px;
background: #202020;
text-align: left;
z-index: 10000;
display: none;
}
.sf-menu ul li {
position: relative;
display: block;
}
.sf-menu ul li > .sf-with-ul:after {
font-family: FontAwesome;
font-size: 10px;
position: absolute;
font-style: normal;
font-weight: normal;
text-decoration: none;
cursor: default;
content: "\f0d7";
color: #ffffff;
bottom: 4px;
right: 66px;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.sf-menu ul li a {
padding: 5px 0 5px 21px;
display: block;
color: #ffffff;
}
.sf-menu ul li a:hover {
background: #ffffff;
color: #202020;
}
.sf-menu ul > .sfHover > a:after {
color: #202020;
}
.sf-menu ul li.sfHover > a {
color: #202020;
background: #ffffff;
}
@media (max-width: 979px) {
.sf-menu ul {
top: 72px;
}
}
/* Second level sub-menu styles
========================================================*/
.sf-menu ul ul {
position: absolute;
top: 26px;
left: 92px;
background: #202020;
z-index: 10000;
text-align: center;
padding: 0 0 30px 0;
}
.sf-menu ul ul li a {
color: #ffffff;
display: inline;
padding-left: 0;
}
.sf-menu ul ul li:hover a {
background: #3e3e3e;
color: #ffffff;
}
.sf-menu ul ul li + li {
margin-top: 2px;
}
@media only screen and (max-width: 767px) {
.sf-menu {
display: none;
}
nav {
width: 100%;
float: none;
}
.select-menu {
border-radius: none;
display: block;
text-transform: capitalize;
float: none;
color: #5e5e5e;
width: 100%;
margin-top: 20px;
background: #ffffff;
font: 22px/28px "Roboto", sans-serif;
text-align: left;
border: 1px solid #5e5e5e;
padding: 2px 0;
position: relative;
}
.select-menu option {
text-align: left;
position: relative;
}

我试图更改显示：内联;并添加float：left;但没有运气。

感谢您的帮助。

如何将垂直2级子菜单更改为水平2级子菜单

0 个答案: