html - Chrome/IE でドロップダウン メニューにメニューのドロップダウン部分が表示されません

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