Почему раскрывающийся список ul в 'Пункте 2 меню' не выровнен абсолютно по верху его родительского элемента li?
При этом для раскрывающегося списка ul CSS задано следующее:
position:absolute;
top:0;
left:0;
Я ожидаю, что он будет покрывать верхний левый угол родительского элемента, то есть полностью охватит его.
Некоторые запутанные симптомы:
Я хочу родительское меню быть кликабельным и иметь выпадающий список в некоторых случаях. Так что там, где есть раскрывающийся список, родительское меню <li> имеет <a>, который дополняется для увеличения области, на которую можно кликать. Это также увеличивает содержание <li>, поскольку li:hover показывает ту же самую область дополнения. Это работает как нужно.
Однако, когда раскрывающийся список отображается и выровнен по <li>, <li>, кажется, находится в положении до , он был расширен на <a>. Когда я проверяю в браузере (Chrome и Firefox), элемент <li> на самом деле не заполняет то же пространство, что и <a>, и поэтому выпадающее меню появляется на некоторое количество ниже там, где я хочу это.
Я понимаю, что могу использовать top: SOME_NEGATIVE_OFFSET в абсолютно позиционированном раскрывающемся списке, но это кажется хакерским, и я хотел бы понять, что происходит?
Это мой первый пост, пожалуйста go легко на меня:)
<!DOCTYPE html>
<html>
<head>
<title>DropDownTest</title>
<style>
ul{
list-style:none;
margin:0;
padding:0;
}
li{
display:block;
position:relative;
}
li>a{
padding:1rem;
background-color:grey;
}
li>a:hover{
background-color:lightgray;
}
.mainbar>li{
float:left;
}
li.hasDrop:hover>ul{
display:block;
}
.dropContent{
display:none;
position:absolute;
top:0; /*not working as expected*/
left:0;
margin:0;/*thought this might have helped but no*/
padding:0;
z-index:1;
list-style:none;
min-width:100%;
}
.dropContent>li>a{
display:block;
}
</style>
</head>
<body>
<div>
<ul class="mainbar">
<li><a href="#">Menu Item 1</a></li>
<li class="hasDrop">
<a href="#">Menu Item 2</a>
<ul class="dropContent">
<li><a href="#">Sub 1</a></li>
<li><a href="#">Sub 2</a></li>
<li><a href="#">Sub 3</a></li>
</ul>
</li>
<li><a href="#">Menu Item 3</a></li>
</ul>
</div>
</body>
</html>