Question

我最近在我的网站上添加了一个下拉菜单......好吧，我正在为我的网站添加一个下拉菜单。我有水平显示的列表，但列表的下拉部分不是..下降。我想知道是否有人能够看一看并告诉我我做错了什么？

谢谢，这是我的代码。

HTML

<ul id="main-nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">Products</a></li>
            <ul>
                <li><a href="#">Apparel</a></li>
                <li><a href="#">Gloves</a></li>
                <li><a href="#">Punching Bags</a></li>
                <li><a href="#">Protection</a></li>
                <li><a href="#">Accessories</a></li>
            </ul>
        <li><a href="#">Wholesales</a></li>
            <ul>
                <li><a href="#">Equipment Catalogue</a></li>
                <li><a href="#">Wholesale Inqueries</a></li>
            </ul>
        <li><a href="#">Contact</a></li>
            <ul>
                <li><a href="#">Direct Contact</a></li>
                <li><a href="#">YouTube Channel</a></li>
                <li><a href="#">LinkedIn Page</a></li>
                <li><a href="#">Facebook Page</a></li>
            </ul>
    </ul>

CSS

#main-nav,
#main-nav ul {
    list-style: none;
}
#main-nav {
    float: left;
}
#main-nav > li {
    float: left;
}
#main-nav li a {
display: block;
    height: 25px;
    line-height: 2em;
    padding: 0 1.5em;
    text-decoration: none;
}
#main-nav ul {
    position: absolute;
    display: none;
z-index: 999;
}
#main-nav ul li a {
    width: 80px;
}
#main-nav li:hover ul {
    display: block;
}
/* Main menu
------------------------------------------*/
#main-nav {
    font-family: Arial;
    font-size: 12px;
    background: #880202;
}
#main-nav > li > a {
    color: #fffff;
    font-weight: bold;
}
#main-nav > li:hover > a {
    background: #c90000;
    color: #ffffff;
}

/* Submenu
------------------------------------------*/
#main-nav ul {
    background: #880202;
}
#main-nav ul li a {
    color: #ffffff;
}
#main-nav ul li:hover a {
    background: #c90000;
}

Answer 1

将此代码放入您的代码并检查

 <ul id="main-nav">
            <li><a href="#">Home</a></li>
            <li><a href="#">Products</a>
                <ul>
                    <li><a href="#">Apparel</a></li>
                    <li><a href="#">Gloves</a></li>
                    <li><a href="#">Punching Bags</a></li>
                    <li><a href="#">Protection</a></li>
                    <li><a href="#">Accessories</a></li>
                </ul></li>
            <li><a href="#">Wholesales</a>
                <ul>
                    <li><a href="#">Equipment Catalogue</a></li>
                    <li><a href="#">Wholesale Inqueries</a></li>
                </ul></li>
            <li><a href="#">Contact</a>
                <ul>
                    <li><a href="#">Direct Contact</a></li>
                    <li><a href="#">YouTube Channel</a></li>
                    <li><a href="#">LinkedIn Page</a></li>
                    <li><a href="#">Facebook Page</a></li>
                </ul></li>
        </ul>

li标签在子菜单ul标签

之后结束

我的下拉菜单未显示Chrome / IE中菜单的下拉部分

1 个答案: