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

我有一个superfish子菜单，其中所有级别的子菜单都垂直显示。我希望将第二级子菜单更改为水平显示，因为当我将鼠标悬停在第一级子菜单上时，第一个第二级子菜单将完全阻挡另一个第一级子菜单的视图

我发现子菜单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>

我试图改变显示：内联；并添加float:left；但是没有运气

谢谢你的帮助

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