無法獲得水平3級css菜單顯示第3級proplerly。我已經包含html和css

Question

我無法創建水平css菜單的第三級飛行。我已經嘗試了許多不同的CSS更改無濟於事。我已經包含菜單html和css。我需要對CSS做出哪些改變才能使其發揮作用？

當 '加分。' 懸停在2個菜單應顯示在右邊

#menu { 
 
    background-color: #66A366; 
 
    padding: 6px 0 6px 20px; 
 
} 
 
#menu ul li a { 
 
    color: #fff; 
 
    text-decoration: none; 
 
    font-family:"Arial Narrow", "Myriad Pro"; 
 
} 
 
#menu li { 
 
    color: #fff; 
 
    text-decoration: none; 
 
    font-family:"Arial Narrow", "Myriad Pro"; 
 
} 
 
ul { 
 
    text-align: left; 
 
    display: inline; 
 
    margin: 0; 
 
    padding: 15px 4px 17px 0; 
 
    list-style: none; 
 
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); 
 
    -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); 
 
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); 
 
} 
 
ul li { 
 
    font: bold 14px/18px sans-serif; 
 
    display: inline-block; 
 
    margin-right: -4px; 
 
    position: relative; 
 
    padding: 15px 20px; 
 
    background: #66A366; 
 
    cursor: pointer; 
 
    -webkit-transition: all 0.2s; 
 
    -moz-transition: all 0.2s; 
 
    -ms-transition: all 0.2s; 
 
    -o-transition: all 0.2s; 
 
    transition: all 0.2s; 
 
} 
 
ul li:hover { 
 
    background: #555; 
 
    color: #fff; 
 
} 
 
ul li ul { 
 
    padding: 0; 
 
    position: absolute; 
 
    top: 48px; 
 
    left: 0; 
 
    width: 150px; 
 
    -webkit-box-shadow: none; 
 
    -moz-box-shadow: none; 
 
    box-shadow: none; 
 
    display: none; 
 
    opacity: 0; 
 
    z-index:1000; 
 
    visibility: hidden; 
 
    -webkit-transiton: opacity 0.2s; 
 
    -moz-transition: opacity 0.2s; 
 
    -ms-transition: opacity 0.2s; 
 
    -o-transition: opacity 0.2s; 
 
    -transition: opacity 0.2s; 
 
} 
 
ul li ul li { 
 
    background: #555; 
 
    display: block; 
 
    color: #fff; 
 
    text-shadow: 0 -1px 0 #000; 
 
} 
 
ul li ul li:hover { 
 
    background: #666; 
 
} 
 
ul li:hover ul { 
 
    display: block; 
 
    opacity: 1; 
 
    visibility: visible; 
 
} 
 

 

 
ul li ul li:hover li{ 
 
    display: block; 
 
    opacity: 1; 
 
    visibility: visible; 
 
} 
 

 
ul li ul li ul li{ 
 
    padding: 15px 20px; 
 
    font: bold 14px/18px sans-serif; 
 
    display: none;  
 
    position: relative; 
 
    top: -48px; 
 
    left: 154px; 
 
    width: 120px; 
 
    -webkit-box-shadow: none; 
 
    -moz-box-shadow: none; 
 
    box-shadow: none; 
 
    opacity: 0; 
 
    z-index:1000; 
 
    visibility: hidden; 
 
    -webkit-transiton: opacity 0.2s; 
 
    -moz-transition: opacity 0.2s; 
 
    -ms-transition: opacity 0.2s; 
 
    -o-transition: opacity 0.2s; 
 
    -transition: opacity 0.2s; 
 
}

<div id="menu"> 
 
<ul> 
 
    <li>SCORES 
 
     <ul> 
 
      <li>ADD SCORES 
 

 
       <ul> 
 
        <li>Level 3-A-1</li> 
 
        <li>Level 3-A-2</li>               
 
       </ul> 
 

 

 
      </li> 
 
      <li>EDIT SCORES</li> 
 
     </ul> 
 
    </li> 
 
    <li>PLAYERS 
 
     <ul> 
 
      <li>ADD PLAYER</li> 
 
      <li>EDIT PLAYERS</li> 
 
     </ul> 
 
    </li> 
 
    <li>COURSES 
 
     <ul> 
 
      <li>ADD COURSE</li> 
 
      <li>EDIT COURSES</li> 
 
     </ul> 
 
    </li>   
 
    <li>ADMIN</li> 
 
</ul> 
 
</div>

Answer 1

Demo FIDDLE

我不知道你怎麼想你的菜單看起來像，但我注意到你忘了將標籤包裝在<ul></ul>標籤內。

如果你這樣做，菜單的外觀和行爲將與大多數用戶期望的一樣。

<div id="menu"> 
    <ul> <-- here 
     <li>SCORES 
     // some code  
     <li>ADMIN</li> 
    </ul> <-- and here 
</div> 

Answer 2

您可以保存使用Swimbi你的時間 - 斯威夫特菜單生成器 - http://f-source.com/swimbi/ 看看menu demo