子子菜单的行为不正常

Question

我一直在尝试的其中一个子菜单有问题。 Partial 的子子菜单的行为不正常。这是我们公司网站的备用导航栏，以防另一个未获批准。我对两者都使用了不同的代码，另一个工作正常，所以没有问题。

我希望 Partial 的子菜单在右侧而不是下方。

这个新的是我找到的代码的组合。

代码如下：https://jsfiddle.net/shamrocksdee/20rgfom5/

HTML:

<div class="menu-wrap">
    <nav class="menu">
        <ul class="clearfix">
            <li><a href="">HOME</a></li>
            <li><a class="" href="">ABOUT <span class="arrow">&#9660;</a>
                <ul class="sub-menu">
                    <li><a href="">M - V - V</a></li>
                    <li><a href="">CHOOSE US</a></li>
                </ul>
            <li><a href="">PROGRAMS</a></li>
            <li><a class="current-item" href="">EVENTS <span class="arrow">&#9660;</a>
                <ul class="sub-menu">
                        <li><a href="">SCHEDULE</a></li>
                </ul>
            <li><a href="">CLIENTS <span class="arrow">&#9660;</a>
                <ul class="sub-menu">
                        <li><a>PARTIAL LIST <span class="arrow">&#9658;</a>
                <ul class="sub-menu">
                        <li><a href="">PUBLIC</a></li>
                        <li><a href="">IN-HOUSE</a></li>
                </ul>
                </li>
                        <li><a href="">TESTIMONIALS</a></li>
                </ul>
            <li><a href="">GALLERY</a></li>
            <li><a href="" rel="ddsubmenu3">SOCIAL</a></li>
        </ul>
    </nav>
</div>

CSS:

body {
    background:#ffffff /*url('body-bg.jpg')*/;
}

container {
    position: absolute;
    width: 1000px;
}


.clearfix:after {
    display:block;
    clear:both;
    content:"";
}

// Menu Outline
.menu-wrap {
    width:100%;
    display: block;
    box-shadow:0px 1px 3px rgba(0, 0, 0, 0.2);
    background:#3e3436;
}

.menu {
    width:1400px;
    margin-left:2.2%;
    margin-top:3.6%;
    height:78px; 
    float:left; 
    padding-left:5px; 
    padding-top:5px; 
    margin-bottom:10px;
    z-index:100;
}

.menu li {
    margin:0px;
    list-style:none;
    font-family:'Raleway';
    font-weight:bold !important;}
    .menu a {
    transition:all linear 0.15s;
    color:#919191;
}

.menu li:hover > a, .menu .current-item > a {
    text-decoration:none;
    color:#d3d3d3;
    display: block;
}

.menu .arrow {
    font-size:11px;
    line-height:0%;
}

// Top Level
.menu > ul > li {
    float:center;
    display:inline-table;
    position:relative;
    font-size:19px;
}

.menu > ul > li > a {
    padding:10px 40px;
    display:inline-table;
    text-shadow:0px 1px 0px rgba(0, 0, 0, 0.4);
}

.menu > ul > li:hover > a, .menu > ul > .current-item > a {
    background:#2e2728;
}

// Bottom Level
.menu li:hover .sub-menu {
    z-index:1;
    opacity:1;
    float: none; 
}

.sub-menu {
    width:160%;
    padding:5px 0px;
    position:absolute;
    top:100%;
    left:0px;
    z-index:-1;
    opacity:0;
    transition:opacity linear 0.15s;
    box-shadow:0px 2px 3px rgba(0, 0, 0, 0.2);
    background:#2e2728;
}

.sub-menu li {
    display:block;
    font-size:16px;
}

.sub-menu li a {
    padding:10px 30px;
    display:block;
}

.sub-menu li a:hover, .sub-menu .current-item a {
    background:#3e3436;
}

.sub-menu ul {
    width:160%;
    position: absolute;
    padding:0;
    left:0;
    display:none; /* hides sublists */
    z-index:-1;
    opacity:0;
    transition:opacity linear 0.15s;
    box-shadow:0px 2px 3px rgba(0, 0, 0, 0.2);
    background:#2e2728;
    float: none;
}

// hides sub-sublists
.sub-menu li:hover ul ul {
    display:none;
} 

// shows sublist on hover
    .sub-menu li:hover ul {
    display: block;
    position:relative;
} 

.sub-menu li ul li:hover ul {
    font-size:16px;
    display: block; /* shows sub-sublist on hover */
    position: inherit;
    padding: 10px 30px;
    left:100%;
    top:0;
    margin:0;
}

谢谢。我不习惯 CSS 代码...当涉及到 CSS 大声笑时我是侏罗纪。

Answer 1

好的，我没有适合您的解决方案，但我可以告诉您问题出在哪里。您所有的子菜单都有一个绝对位置。 - 并且您在子菜单和子子菜单上具有相同的 "sub-menu" 样式。

如果您希望子菜单的行为与子菜单不同，那么我建议您编写子菜单样式。

它们可以既有共同的属性，又可以有自己的属性——例如定位。

.sub-menu, .sub-sub-menu {
   width:160%;
   padding:5px 0px;
   position:absolute;
   top:100%;
   opacity:0;
   transition:opacity linear 0.15s;
   box-shadow:0px 2px 3px rgba(0, 0, 0, 0.2);
   background:#2e2728;
}
.sub-menu {
   left:0px;
   z-index:-1;
}
.sub-sub-menu
   left:50px;
   z-index:-1;
}

或其他...

您还需要更新子菜单帽子内的所有样式都具有绝对定位。

但是 - 我的建议是不要在不需要时使用绝对定位。

开始慢慢删除“position:absolute；一次一个，看看有什么变化...修复每个更改，使其看起来正确...并继续删除它，直到您没有任何剩余可删除或直到删除它无法修复。

Answer 2

我想这些是您需要的所有更改，才能使其正常工作：

Working : Demo

CSS: 只提到需要修改的部分，其余保持不变。

.sub-menu
{
    width:100%; 
    padding:0px;
}

.sub-menu li a
{
    padding:10px 28px 10px 10px;
}

.sub-menu ul
{
    position:absolute !important;
    width:100%;
    left:171px;
    top:0px;

}

子子菜单的行为不正常

Sub sub-menu doesn't behave as it should

html

css

navbar