0

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

谢谢，这是我的代码。

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;
}
4

1 回答 1

3

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

 <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 标记之后结束

于 2013-05-08T11:36:55.287 回答