html - 子子菜单的行为不正常

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

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

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;

}