菜单表现不佳

Question

well having posted early on and making a complete hash of it Sorry! I have now got my fiddle right now, the problem is that i am using noJS to animate my menus but having got the menu looking how i wanted it the noJS stopped working, so i have been playing with the css and now the menus don't work properly at all, here is my fiddle Menu behaving badly

HTML:

<div id="header-container">
    <div id="bandmenu-container">
        <ul id="bandmenu">
            <li><a href="#">Band</a> <!-- first level -->
                <ul class="noJS">    <!-- second level -->
                    <li><a href="#">History</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Members</a>
                        <ul class="noJS"> <!-- thered level -->
                            <li><a href="#">Paul Hughes</a></li>
                            <li class="divider"></li>
                            <li><a href="#">David Grant</a></li>
                            <li class="divider"></li>
                            <li><a href="#">Tony Duggins</a></li>
                            <li class="divider"></li>
                            <li><a href="#">David Lee-Channing</a></li>
                            <li class="divider"></li>
                            <li><a href="#">Thomas Casson</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li><a href="#">Media</a>
                <ul class="noJS">
                    <li><a href="#">The Gallery</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Videos</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Music</a></li>
                </ul>
            </li>
            <li><a href="#">Bookings</a>
                <ul class="noJS">
                    <li><a href="#">Enquires</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Current Bookings</a></li>
                </ul>
            </li>
            <li><a href="#">FAQ's</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>

CSS:

        #header-container {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 164px;
    }
    /* Band Menu
    ---------------------------------------------*/
    #bandmenu-container {
        position: relative; /* IE7 */
        top: 135px;
        width: 500px;
        height: 29px;
        margin: 0 auto;
    }
    /* Main Menu
    ---------------------------------------------*/
    #bandmenu, #bandmenu ul {
        padding: 0;
        margin: 0;
        list-style: none;
        line-height: 1.5em;
        white-space: nowrap;
        z-index: 999;
    }
    #bandmenu li {
        position: relative; /* IE7 */
        vertical-align: bottom; /* IE7 */
        /* next two lines: bar height*/
        padding-top: 2px;
        height: 26px;
        float: left;
    }
    #bandmenu a {
        color: #fff;
        padding: 0px 16px;
        text-decoration: none;
    }  
    #bandmenu li ul {
        position: absolute;
        background: #c2c2c2;
        left: -999em;
    }
    #bandmenu ul li {
        float: none;
    }
    #bandmenu li li { 
        clear: both;
        width: auto;
        background-color: #660000;
    }
    #bandmenu ul li a {
        width: 60px;
        color: #fff;
        padding: 5 !important;
        line-height: 1.5em;
    }
    #bandmenu li li a {
        margin: 0;
    }
    #bandmenu > li:hover > a { /* highlight all menus */
        display: block;
        width: auto;
        background-color: #c2c2c2;
        color: #fff;
    }
    #bandmenu li:hover ul.noJS { /* show first nested level */
        display: block;
        width: auto;
        height: auto;
        left: 30px;
        top: 24px;
        border: 2px #fff solid;
        font-size: small;
    }
    #bandmenu li li:hover ul { /* show second nested level */
        display: block;
        left: 100%;
        top: 0;
        font-size: small;
    }
    #bandmenu .divider {
        padding-top: 1px;
        height: 1px;
        width: auto;
        overflow: hidden;
        background: url('../images/divider.gif')
    }

Answer 1

Here fixed the issue of 2nd submenu display issue.

 #header-container { position: absolute; top: 0; left: 0; width: 100%; height: 164px; } /* Band Menu ---------------------------------------------*/ #bandmenu-container { position: relative; /* IE7 */ top: 135px; width: 500px; height: 29px; margin: 0 auto; } /* Main Menu ---------------------------------------------*/ #bandmenu, #bandmenu ul { padding: 0; margin: 0; list-style: none; line-height: 1.5em; white-space: nowrap; z-index: 999; } #bandmenu li { position: relative; /* IE7 */ vertical-align: bottom; /* IE7 */ /* next two lines: bar height*/ padding-top: 2px; height: 26px; float: left; } #bandmenu a { color: #000; padding: 0px 16px; text-decoration: none; } #bandmenu li ul { position: absolute; background: #c2c2c2; left: -999em; } #bandmenu ul li { float: none; } #bandmenu li li { clear: both; width: auto; background-color: #660000; } #bandmenu ul li a { width: 60px; color: #fff; padding: 5 !important; line-height: 1.5em; } #bandmenu li li a { margin: 0; } #bandmenu > li:hover > a { /* highlight all menus */ display: block; width: auto; background-color: #c2c2c2; color: #fff; } #bandmenu li:hover > ul.noJS { /* show first nested level */ display: block; width: auto; height: auto; left: 30px; top: 24px; border: 2px #fff solid; font-size: small; } #bandmenu li li:hover > ul { /* show second nested level */ display: block; left: 100%; top: 0; font-size: small; } #bandmenu .divider { padding-top: 1px; height: 1px; width: auto; overflow: hidden; background: url('../images/divider.gif') }

 <body> <div id="header-container"> <div id="bandmenu-container"> <ul id="bandmenu"> <li><a href="#">Band</a> <!-- first level --> <ul class="noJS"> <!-- second level --> <li><a href="#">History</a> </li> <li class="divider"></li> <li><a href="#">Members</a> <ul class="noJS"> <!-- thered level --> <li><a href="#">Paul Hughes</a> </li> <li class="divider"></li> <li><a href="#">David Grant</a> </li> <li class="divider"></li> <li><a href="#">Tony Duggins</a> </li> <li class="divider"></li> <li><a href="#">David Lee-Channing</a> </li> <li class="divider"></li> <li><a href="#">Thomas Casson</a> </li> </ul> </li> </ul> </li> <li><a href="#">Media</a> <ul class="noJS"> <li><a href="#">The Gallery</a> </li> <li class="divider"></li> <li><a href="#">Videos</a> </li> <li class="divider"></li> <li><a href="#">Music</a> </li> </ul> </li> <li><a href="#">Bookings</a> <ul class="noJS"> <li><a href="#">Enquires</a> </li> <li class="divider"></li> <li><a href="#">Current Bookings</a> </li> </ul> </li> <li><a href="#">FAQ's</a> </li> <li><a href="#">Contact</a> </li> </ul> </div> </div>

Working JSFiddle http://jsfiddle.net/zahedkamal87/h1pxp7a8/16/