gpt4 book ai didi

html - 悬停导航栏未对齐

转载 作者:行者123 更新时间:2023-11-28 06:12:24 24 4
gpt4 key购买 nike

我正在尝试创建一个可悬停的导航栏,当您将鼠标悬停时,相关链接会出现并且它似乎没有在下方对齐,并且当位置不是绝对时,它会在悬停后将其他链接推到一边

HTML

<html>

<head>
<link rel="stylesheet" type="text/css" href="testsitestyle.css">
</head>

<body>
<div id="nav">
<ul>
<li id="drop2">Home<li/>
<ul>
<li>Number</li>
<li>One</li>
</ul>

</li>
<li>Knowledge</li>
<li>Qoutes</li>
<li>Contact</li>
</ul>
</div>

</body>

</html>

CSS

html, body{
height:100%;
width:100%;
padding:0;
margin:0;

}


#nav {
width:100%;
max-height:100%;
text-align:center;
}

#nav ul {
padding:0;
margin:0;
}

#nav li {
text-align:center;
text-decoration:none;
display:inline-block;
text-transform:uppercase;
font-family:Arial;
font-size:18px;
margin-top:0px;
margin-left:40px;
margin-right:40px;
padding:30px;
vertical-align:top;
border:2px solid red;
position:relative;


}


#drop2 ul {
padding:0;
margin:0px;
display:none;
position:absolute;

border:2px solid red;
}

#drop2 ul li {
text-align:center;
text-decoration:none;
text-transform:uppercase;
font-family:Arial;
font-size:18px;
``padding:30px;
margin:0px;
margin-top:25px;
}
#drop2:hover>ul{
display:block;
}

最佳答案

我在它们周围都放置了红色边框,以向您展示我正在尝试创建的内容。 example

关于html - 悬停导航栏未对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36094756/

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