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