Having trouble getting horizontal 3 level css menu to show 3rd level proplerly. I have included html and css

Question

I'm having trouble creating the third level fligh out for a horizontal css menu. I've tried many different changes to the css to no avail. I have included the menu html and the css. What changes do I need to make to the css to have it work?

When 'ADD SCORES' is hovered over the 2 menus should show to the right

 #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

I'm not sure how you want your menu to look like, but I noticed that you forgot to wrap the tabs inside a <ul></ul> tag.

If you do that, the menu will look and behave like what most users would expect.

<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/节省时间，看一下菜单演示