无法获取水平的3级CSS菜单以正确显示3级。 我已包含html和CSS

Question

我在为水平css菜单创建第三个级别时遇到麻烦。 我尝试对CSS进行许多不同的更改都无济于事。 我已经包含了菜单html和CSS。 为了使其正常工作，我需要对CSS进行哪些更改？

将“ ADD SCORES”悬停在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

演示FIDDLE

我不确定您希望菜单的外观如何，但是我注意到您忘记将选项卡包装在<ul></ul>标记内。

如果这样做，菜单的外观和行为将与大多数用户所期望的一样。

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

Answer 2

您可以使用Swimbi-Swift Menu Builder- http: //f-source.com/swimbi/节省时间，看一下菜单演示