CSS下拉菜单找不到问题

Question

我已经看过有关该主题的所有问题，但是找不到我的编码有任何问题。 我需要别人的眼睛才能发现问题所在。 我一定没有看到什么，因为我之前已经成功创建了下拉菜单...

这是我的菜单的html5编码：

<nav id="menu">
<ul>
    <li><a href="index.html" class="currentnew">Home</a></li>
    <li><a href="biography.html">Biography</a></li>
    <li><a href="artwork.html">Artwork</a></li>
        <ul>
            <li><a href="paintings.html">Paintings</a></li>
            <li><a href="drawings.html">Drawings</a></li>
            <li><a href="sculpture.html">Sculpture</a></li>
            <li><a href="viewall.html">View All</a></li>
        </ul>
    <li><a href="exhibitions.html">Exhibitions</a></li>
    <li><a href="commissions.html">Commissions</a></li>
</ul>
</nav>

这是我的CSS样式，正试图制作一个下拉菜单：

/**** Main Menu ****/

#menu {
background-image: url(../images/paintbanner.png);
height: 55px;
width: 793px;
margin-left:125px;
margin-top: -25px;
}

#menu ul a {
color: #f7f5f1;
}

#menu ul a:hover {
color: #635ccb;
}

#menu ul {
margin-left: 75px;
}

#menu ul li {
float: left;
margin-right: 60px;
font-family: "Bell MT",
             serif;
font-size: 1.1em;
margin-top: 20px;
}

#menu ul ul {
display: none;
position: absolute;
}

#menu ul li:hover > ul {
display: block;
}

#menu ul ul li {
float: none;
margin-top: 0;
margin-right: 0;
position: relative;
background-image: url(../images/dropdown.png);
height: 100%;
width: 120px;
}

#menu ul ul a {
color: #1e1b1b;
font-size: .9em;
}

Answer 1

在我认为您要<li>之前，您已关闭<li> 。 看这里：

<li><a href="artwork.html">Artwork</a></li>
        <ul>
            <li><a href="paintings.html">Paintings</a></li>
            <li><a href="drawings.html">Drawings</a></li>
            <li><a href="sculpture.html">Sculpture</a></li>
            <li><a href="viewall.html">View All</a></li>
        </ul>

应该可能是：

<li>
        <a href="artwork.html">Artwork</a>
        <ul>
            <li><a href="paintings.html">Paintings</a></li>
            <li><a href="drawings.html">Drawings</a></li>
            <li><a href="sculpture.html">Sculpture</a></li>
            <li><a href="viewall.html">View All</a></li>
        </ul>
</li>

Answer 2

发生这种情况是因为li:hover应该启用<ul>和display:block在<li>

尝试这个：

<nav id="menu">
<ul>
   <li><a href="index.html" class="currentnew">Home</a></li>
   <li><a href="biography.html">Biography</a></li>
   <li><a href="artwork.html">Artwork</a>
       <ul>
           <li><a href="paintings.html">Paintings</a></li>
           <li><a href="drawings.html">Drawings</a></li>
           <li><a href="sculpture.html">Sculpture</a></li>
           <li><a href="viewall.html">View All</a></li>
       </ul>
   </li>
   <li><a href="exhibitions.html">Exhibitions</a></li>
   <li><a href="commissions.html">Commissions</a></li>
</ul>
</nav>

示例： http ： //jsfiddle.net/9zfsr/