Question

很早就发布了，并完成了它的完整哈希抱歉！我现在已经得到了我的小提琴，问题是我正在使用noJS来动画我的菜单，但是看到我想要它的菜单noJS停止工作，所以我一直在玩css而现在菜单不是完全正常工作，这是我的小提琴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

这里解决了第二个子菜单显示问题。

#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>

使用JSFiddle http://jsfiddle.net/zahedkamal87/h1pxp7a8/16/

菜单表现不佳

1 个答案: