gpt4 book ai didi

html - 将两个无序列表放在一个下方,作为下拉导航的准备

转载 作者:行者123 更新时间:2023-11-28 05:46:10 27 4
gpt4 key购买 nike

我一直在努力正确定位列表。我当前的代码是:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>

<body>
<div id="wrapper">
<nav id="nav">
<ul>
<li><a href="">Option1</a></li>
<ul>
<li><a href="">Sub1</a></li>
<li><a href="">Sub2</a></li>
</ul>
<li><a href="">Option2</a></li>
<ul>
<li><a href="">Sub3</a></li>
<li><a href="">Sub4</a></li>
<li><a href="">Sub5</a></li>
</ul>
<li><a href="">Option3</a></li>
</ul>
</nav>
</div>
</body>

</html>

和风格:

* {
margin: 0;
padding: 0;

}

#nav {
display: inline-block;


}

#nav ul {
list-style: none;
line-height: 30px;


}

#nav li {
width: 200px;
border: 1px solid black;
float: left;
position: relative;
}

#nav ul li a {
display: block;
height: 30px;
}

#nav ul ul {
position: absolute;
}

但现在子列表的元素“沉”在了主列表中。我无法摆脱它。有什么建议可以更改代码吗?

最佳答案

您希望实现的最终样式并不完全清楚,但在使用相对或绝对定位时,您至少需要定义边距。您的相对定位基本上是正常的,因为没有定义边距。同样,您的绝对定位导致元素重叠,因为您没有给它任何边距或填充。

我已经注释掉了导致问题的 CSS,希望这就是您要找的东西?

* {
margin: 0;
padding: 0;
}

#nav {
display: block;
}

#nav ul {
list-style: none;
line-height: 30px;
}

#nav li {
width: 200px;
border: 1px solid black;
/* float: left; */
/* position: relative; */
}

#nav ul li a {
display: block;
height: 30px;
}

#nav ul ul {
/* position: absolute; */
}

关于html - 将两个无序列表放在一个下方,作为下拉导航的准备,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37599183/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com