0
因此，我正在为下拉列表编写一些HML & 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;
}
所以，我的网页看起来像这样的时刻：
在你的'#navMenu ul ul'你有'top：30px;'。如图所示，这会将所有内容降低（与'position：absolute;'结合使用）。 – Sablefoste 2014-12-01 16:08:08
尝试正确关闭您的链接''。 – j08691 2014-12-01 16:10:11