子子菜單不像它應該那樣運行

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帽子裏面所有的款式都絕對定位。

但是 - 我的建議是而不是如果您不需要使用絕對定位。

開始慢慢刪除「位置：絕對;一次一個，看看有什麼變化......修正每個變化，使其看起來是正確的......並繼續刪除它，直到你沒有任何左邊的刪除，或直到。刪除它不能被固定