悬停在导航链接上显示单独的 div

Question

我想要做的是在我的导航栏中有一个名为“天气”的链接，当你悬停或点击它时，我想让它显示一个下拉菜单，里面包含天气网络小部件。

这是我目前的情况。悬停部分可以正常工作，但它会将“天气”链接推到我的导航栏底部。如何使它恢复原来的位置？

    <div id="navbar"> 
        <ul> 
            <li><a href="#">Home <img src="home.png" /></a></li> 
            <li><a href="#">Forum <img src="forum.png" /></a></li> 
            <li><a href="#">Pictures <img src="camera.png" /></a></li> 
            <li><a href="#">Videos <img src="videos.png" /></a></li> 
            <li><a href="#">Technology <img src="technology.png" /></a></li>
            <li><a href="#">Politics <img src="politics.png" /></a></li> 
            <li><a href="#">World Issues <img src="issues.png" /></a></li> 
            <li><a href="#">Contact <img src="contact.png" /></a> 
            <li><a href="#"><div id="div1">Weather <img src="weather.png" /></a><div id="div2">testing</div></div></li> 
        </ul> 
    </div> 

以下是 CSS 代码：

#div1 {
    cursor:pointer;
 }
#div2 {
    display:none;
    height: 20px;
    width: 100px;
    background-color: white;
    position: absolute;
    top: 100px;
    left: 100px;
    z-index: 20;
 }
#div1:hover #div2 {
    display:block;
 }

这里有一张图片，展示了它的外观。

- user3107811

---

我想知道 weather.png 的大小和 div2 的大小是否存在差异 - 可以尝试将 div2 的高度和宽度设置为零，看看会发生什么。或者在 <img> 标签中为 .png 设置高度和宽度。 - TimSPQR

你应该使用嵌套的li标签，而不是显示和隐藏第二个div。 - APAD1

你的导航栏可能没有足够的空间容纳所有元素，导致最后一个元素被推到下一行。尝试减小边距/填充，看看会发生什么。 - L_Holcombe

你能否在JSFiddle或其他平台上展示一下你想要实现的效果的例子吗？目前我们还不太清楚你具体想要什么样的效果。但从我的角度来看，似乎你的绝对定位正在破坏文档的流程。 - Nick

这里是我的示例网站的实时版本。将鼠标悬停在天气上：http://xellic.wink.ws/index.html - user3107811

你的“天气”列表项的HTML与其余菜单项不一致。看起来可能有错误。如果你清理你的HTML，将更容易隔离可能的原因并测试/修复问题。 - Nick

Answer 1

首先，您应该修复您的HTML。将您的div行替换为以下内容（我正在重新格式化它以便更易于阅读我的答案）：

<li id="div1">
    <a href="#">Weather <img src="weather.png" /></a>
    <div id="div2">testing</div>
</li> 

然后，尝试使用以下CSS代码：

#div1 {
    position: relative;
}
#div1 > a {
    cursor:pointer;
}
#div2 {
    position: absolute;
    top: 100%;
    left: 0;

    display:none;
    height: 20px;
    width: 100px;
    background-color: white;
    z-index: 20;
 }
 #div1:hover #div2 {
    display:block;
 }

当你在相对定位元素内放置一个绝对定位元素时，它会根据相对元素的边界来定位自己。因此，top: 100% 将把 #div2 的顶部放在 #div1 的底部。这就是它能够工作的原因。请注意保留HTML标签。

- Ben Barkay

---

啊哈！运行得非常好！非常感谢你！！ - user3107811

Answer 2

你的HTML代码有问题。虽然它可以渲染，但不会按照你的期望进行渲染。尝试使用以下代码来添加天气链接：

<li><div id="div1"><a href="#">Weather <img src="weather.png" /></a><div id="div2">testing</div></div></li>

对于 onclick 事件，您需要使用 javascript 或 jquery：

$("#div1").on("click", function () {
    $("#div2").css("display", "block");
}

如果你想的话，也可以将onclick事件放在标签中。

- Bic

Answer 3

你需要使用Javascript来检测天气链接的点击（添加一个id或类），并在点击时使用弹出窗口（谷歌一个jquery插件）显示天气小部件。

- David Ansermot

---

这似乎不准确。你能提供你所参考的来源链接吗？ - Nick