子子菜单不像它应该那样运行

Question

我遇到了一个我一直在尝试的子菜单的问题。部分的子子菜单不像其应该那样运行。这是我们公司网站的备份导航栏，以防其他人未获批准。我已经使用了不同的代码，另一个工作正常，所以没有问题。

我希望部分的子菜单可以向右而不是下面的窗帘。

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

下面的代码：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> 

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; 

} 

Answer 2

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

如果你想要你的子子菜单的行为与子菜单不同，那么我建议你写一个子子菜单样式。

它们都可以具有两者共有的属性，但是都有自己的属性 - 例如定位。

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

或任何...

您还需要更新子menut帽子里面所有的款式都绝对定位。

但是 - 我的建议是而不是如果您不需要使用绝对定位。

开始慢慢删除“位置：绝对;一次一个，看看有什么变化......修正每个变化，使其看起来是正确的......并继续删除它，直到你没有任何左边的删除，或直到。删除它不能被固定