gpt4 book ai didi

html - CSS水平下拉定位

转载 作者:太空宇宙 更新时间:2023-11-04 05:26:51 25 4
gpt4 key购买 nike

我正在尝试使用水平下拉菜单实现水平导航菜单。我想弄清楚如何使水平下拉文本居中,使其位于导航容器的中心,这样用户就不必将鼠标移到最左边即可到达链接。

    <style type="text/css">
#nav-container {
padding: 4px;
width: 900px;
height: 60px;
background: #CCC;
}
#navbar {
margin:0;
padding:0;
}
#navbar li {
padding: 6px;
display: inline;
list-style: none;
}
#navbar li ul {
display: none;
position: absolute;
margin:0;
padding:0;
width: 900px;
}
#navbar li:hover ul {
display: block;
}

</style>
</head>

<body>
<div id="nav-container">
<ul id="navbar">
<li><a href="#">Link</a>
<ul>

<li><a href="#">Hello</a></li>
<li><a href="#">World</a></li>
</ul>
</li>
<li><a href="#">Link</a>
<ul>
<li><a href="#">Peace</a></li>

<li><a href="#">Love</a></li>
</ul>
</li>
<li><a href="#">Link</a>
<ul>
<li><a href="#">Smiles</a></li>
<li><a href="#">Cries</a></li>

</ul>
</li>
<li><a href="#">Link</a>
<ul>
<li><a href="#">Homer</a></li>
<li><a href="#">Peter</a></li>
</ul>

</li>
<li><a href="#">Link</a>
<ul>
<li><a href="#">Giggity</a></li>
<li><a href="#">Fapping</a></li>
</ul>
</li>

<li><a href="#">Link</a>
<ul>
<li><a href="#">Napster</a></li>
<li><a href="#">Myspace</a></li>
</ul>
</li>
</ul>
</div>

这是一个粗略的代码,只是为了展示一个例子,这里是一个 live example的代码。

谢谢

最佳答案

相对-绝对定位的组合应该可以解决问题。我尝试添加这两条规则,这似乎有效:

#navbar li {
position: relative;
}

#navbar li ul {
position: absolute;
left: 0;
top: 24px; /* must me same as the height of parent li +/- a couple of pixels */
}

这似乎可以解决问题。

关于html - CSS水平下拉定位,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4779252/

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