0
Итак, я пишу некоторые HML & CSS для выпадающих списков, и я получил его на работу, но у меня возникла проблема при добавлении более двух элементов в div, элементы после второго сложен. Я не могу понять, в чем проблема, какие-то предложения?Подкладка вверх
Вот мой 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
Попытайтесь правильно закрыть свои ссылки ''. – j08691