无法获得水平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