Question

所以我写了一些HML＆amp;下拉列表的CSS我得到了它的工作，但我在div中添加2个以上的元素时遇到问题，第二个元素后面的元素被标记下来。我无法弄清楚问题是什么，有什么建议吗？

这是我的HTML代码：

<!DOCTYPE html PUBLIC "-//W3C//DID XHTML 1.0 Transitional// EN" "http://www.w3.org/TR/xhtmli/DTD.xhtmli-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="css/dropDown.css">
<meta http-equiv="Content-Type" contents="text/html; charst=utf-8" />
<title> My Website </title>
</head>

<body>

<div id="wrapper">

    <div id="navMenu">

        <ul>
            <li><a href="#"> Home </a></li>     
        </ul>

        <ul>
            <li><a href="#"> Top 10 Defenders </a>
                <ul>
                    <li><a href="#"> Title 1 </li>
                    <li><a href="#"> Title 2 </li>
                    <li><a href="#"> Title 3 </li>
                    <li><a href="#"> Title 4 </li>
                    <li><a href="#"> Title 5 </li>
                    <li><a href="#"> Title 6 </li>
                    <li><a href="#"> Title 7 </li>
                    <li><a href="#"> Title 8 </li>
                    <li><a href="#"> Title 9 </li>
                    <li><a href="#"> Title 10 </li> 
                </ul>
            </li>
        </ul>

        <ul>
            <li><a href="#"> Top 10 Midfielders </a>
                <ul>
                    <li><a href="#"> Title 1 </li>
                    <li><a href="#"> Title 2 </li>
                    <li><a href="#"> Title 3 </li>
                    <li><a href="#"> Title 4 </li>
                    <li><a href="#"> Title 5 </li>
                    <li><a href="#"> Title 6 </li>
                    <li><a href="#"> Title 7 </li>
                    <li><a href="#"> Title 8 </li>
                    <li><a href="#"> Title 9 </li>
                    <li><a href="#"> Title 10 </li> 
                </ul>
            </li>
        </ul>

        <ul>
            <li><a href="#"> Top 10 Forwards </a>
                <ul>
                    <li><a href="#"> Title 1 </li>
                    <li><a href="#"> Title 2 </li>
                    <li><a href="#"> Title 3 </li>
                    <li><a href="#"> Title 4 </li>
                    <li><a href="#"> Title 5 </li>
                    <li><a href="#"> Title 6 </li>
                    <li><a href="#"> Title 7 </li>
                    <li><a href="#"> Title 8 </li>
                    <li><a href="#"> Title 9 </li>
                    <li><a href="#"> Title 10 </li> 
                </ul>
            </li>
        </ul>

        <ul>
            <li><a href="#"> Best Formations </a>
                <ul>
                    <li><a href="#"> Title 1 </li>
                    <li><a href="#"> Title 2 </li>
                    <li><a href="#"> Title 3 </li>
                    <li><a href="#"> Title 4 </li>
                    <li><a href="#"> Title 5 </li>
                    <li><a href="#"> Title 6 </li>
                    <li><a href="#"> Title 7 </li>
                    <li><a href="#"> Title 8 </li>
                    <li><a href="#"> Title 9 </li>
                    <li><a href="#"> Title 10 </li> 
                </ul>
            </li>
        </ul>

    </div>

</div>

</body>
</html>

这是我的CSS：

@charset "utf-8";

#navMenu{

    margin:0;
    width:75%;
    padding:0;

}

#navMenu ul{

    margin:0;
    padding:0;
    line-height:30px;


}

#navMenu li{

    margin:0;
    padding:0;
    list-style:none;
    float:left;
    position:relative;

}

#navMenu ul li a{

    text-align:center;
    font-family:"Comic Sans MS", cursive;
    text-decoration:none;
    height:30px;
    width:150px;
    display:block;
    color:#000;

}

#navMenu ul ul{
    position:absolute;
    visibility:hidden;
    top:30px;
}

#navMenu ul li:hover ul{
    visibility:visible;
}

所以我的页面目前看起来像这样：

enter image description here

Answer 1

你在navMenu ul li中有一个30像素的高度......这意味着它会被推下来。

此外，我必须指出您没有正确使用您的列表项。您在上面列表中的每个项目后关闭您的未加序列表，这不是很好的。我为你做了一个小提琴。

http://jsfiddle.net/kad97ro1/

#navMenu ul li a{   
    text-align:center;
    font-family:"Comic Sans MS", cursive;
    text-decoration:none;
    width:150px;
    display:block;
    color:#000;   
}

Answer 2

问题在于height:30px;的{{1}}，删除它，一切都会好的：

#navMenu ul li a

Answer 3

您需要关闭锚元素。

<!DOCTYPE html PUBLIC "-//W3C//DID XHTML 1.0 Transitional// EN" "http://www.w3.org/TR/xhtmli/DTD.xhtmli-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="css/dropDown.css">
<meta http-equiv="Content-Type" contents="text/html; charst=utf-8" />
<title> My Website </title>
</head>

<body>

<div id="wrapper">

    <div id="navMenu">

        <ul>
            <li><a href="#"> Home </a></li>     
        </ul>

        <ul>
            <li><a href="#"> Top 10 Defenders </a>
                <ul>
                  <li><a href="#"> Title 1 </a></li>
                    <li><a href="#"> Title 2 </a></li>
                    <li><a href="#"> Title 3 </a></li>
                    <li><a href="#"> Title 4 </a></li>
                    <li><a href="#"> Title 5 </a></li>
                    <li><a href="#"> Title 6 </a></li>
                    <li><a href="#"> Title 7 </a></li>
                    <li><a href="#"> Title 8 </a></li>
                    <li><a href="#"> Title 9 </a></li>
                    <li><a href="#"> Title 10 </a></li> 
                </ul>
            </li>
        </ul>

        <ul>
            <li><a href="#"> Top 10 Midfielders </a>
                <ul>
                    <li><a href="#"> Title 1 </a></li>
                    <li><a href="#"> Title 2 </a></li>
                    <li><a href="#"> Title 3 </a></li>
                    <li><a href="#"> Title 4 </a></li>
                    <li><a href="#"> Title 5 </a></li>
                    <li><a href="#"> Title 6 </a></li>
                    <li><a href="#"> Title 7 </a></li>
                    <li><a href="#"> Title 8 </a></li>
                    <li><a href="#"> Title 9 </a></li>
                    <li><a href="#"> Title 10 </a></li> 
                </ul>
            </li>
        </ul>

        <ul>
            <li><a href="#"> Top 10 Forwards </a>
                <ul>
                    <li><a href="#"> Title 1 </a></li>
                    <li><a href="#"> Title 2 </a></li>
                    <li><a href="#"> Title 3 </a></li>
                    <li><a href="#"> Title 4 </a></li>
                    <li><a href="#"> Title 5 </a></li>
                    <li><a href="#"> Title 6 </a></li>
                    <li><a href="#"> Title 7 </a></li>
                    <li><a href="#"> Title 8 </a></li>
                    <li><a href="#"> Title 9 </a></li>
                    <li><a href="#"> Title 10 </a></li> 
                </ul>
            </li>
        </ul>

        <ul>
            <li><a href="#"> Best Formations </a>
                <ul>
                    <li><a href="#"> Title 1 </a></li>
                    <li><a href="#"> Title 2 </a></li>
                    <li><a href="#"> Title 3 </a></li>
                    <li><a href="#"> Title 4 </a></li>
                    <li><a href="#"> Title 5 </a></li>
                    <li><a href="#"> Title 6 </a></li>
                    <li><a href="#"> Title 7 </a></li>
                    <li><a href="#"> Title 8 </a></li>
                    <li><a href="#"> Title 9 </a></li>
                    <li><a href="#"> Title 10 </a></li> 
                </ul>
            </li>
        </ul>

    </div>

</div>

</body>
</html>

排队问题

3 个答案: