Html 子菜单没有'；Don’不要表现得像应有的那样

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

我希望“部分到窗帘”的子菜单位于右侧，而不是其下方

这个新的是我发现的代码的组合

代码如下：

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>

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 lol时，我是侏罗纪人。

好的，我没有解决方案给你，但我可以告诉你问题是什么。所有子菜单都有一个绝对位置。-在子菜单和子菜单上都有相同的“子菜单”样式

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

它们都可以有共同的属性，但也有自己的定位

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

或者别的什么

您还需要更新子菜单中具有绝对位置的所有样式

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

然而，我的建议是，如果你不需要绝对定位，就不要使用绝对定位

---

“开始慢慢删除”位置：绝对；一次一个，看看有什么变化…修复每个变化，使其看起来正确…并继续删除它，直到您没有剩余的可删除或无法修复为止。

我想这些都是您需要的更改，以使其正常工作：

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;

}

---

大家好，欢迎来到Stack Overflow（堆栈溢出）。“行为不正常“并不是对正在发生的事情的非常描述性的解释。您能告诉我们您希望看到什么吗？您看到的是什么？JSFIDLE非常棒-谢谢：）谢谢。在客户端菜单中是部分子菜单，然后有一个子菜单。我希望它在右边，而不是在子菜单下面。就像右边的窗帘，箭头指向的地方。：）现在看。。。可能不相关，但您是否注意到您没有正确闭合跨距<代码>▼哦，这一个帮助很大，我正在寻找的那个！非常感谢！：）谢谢，但对我不起作用。子菜单仍在部分菜单下方。：）是的，我知道这并不能解决问题-然后你必须实际使用适当的左定位将其移动到你需要的位置：）现在你实际上可以对菜单执行此操作（如果它们完全位于彼此上方，则无法执行此操作）