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

试试这个：

{{1}}

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

使用CSS下拉菜单找不到问题

2 个答案: