gpt4 book ai didi

html - CSS 下拉导航 - 下拉菜单出现在父链接上方

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

<div id="header">
<div class="cont">
<div id="banner">

<div id="nav">

<ul>
<li><a href="index.htm">home</a></li>

<li><a href="work.html">Works»</a>
<ul>
<li><a href="paintings.html">Paintings</a></li>
<li><a href="#">Watercolour</a></li>
<li><a href="#">Ink</a></li>
</ul>
</li>
<li style="

"><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</div>
<div id="greeting" style="
clear: both;
">

导航栏 CSS(完整的 CSS 可以在下面的 JSfiddle 链接中找到)

#nav
{ float:right;
position:relative;
width:100%;
text-align:center;
font-family: monospace, serif;
list-style-type: none;
height:150px;
}
#nav ul
{float: center;
clear: left;
font-family: monospace, serif;
list-style-type: none;
text-align:center;
padding:0;
}

我的问题示例:http://jsfiddle.net/6n3WK/

正如您从 jsfiddle 链接中看到的那样,当将鼠标悬停在“Works”链接上时,下拉菜单出现在上方我已经四处搜索并尝试自行修复但没有成功。我真的很感谢您的帮助,并且想要解释为什么它会在父链接之上,我之前在下面工作并且我更改了一些 CSS,现在都是 pete tong。谢谢大家:)

最佳答案

#nav ul li:hover ul {
display: block;
opacity: 1;
position: absolute;
text-align: center;
visibility: visible;
}

关于html - CSS 下拉导航 - 下拉菜单出现在父链接上方,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23991644/

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