悬停在导航链接显示一个单独的DIV

我想要做的是有一个在我的导航栏叫做“天气”链接，当你在它悬停或点击它，我想让它显示与天气下拉网络小部件里面。悬停在导航链接显示一个单独的DIV

这是我到目前为止。悬停部分工作，但它将“天气”链接推到我的导航栏的底部。我如何才能恢复原来的位置？

<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; 
}

的是什么样子Here is an image。

来源

2013-12-16 user3107811

我在想，weather.png的大小和div2的大小之间是否存在差距 - 也许试试div2没有高度和宽度来查看会发生什么。或者在 TimSPQR

中给出.png高度和宽度您应该使用嵌套的li标签而不是显示和隐藏第二个div。 – APAD1

您的导航栏中可能没有足够的空间容纳所有元素，并且会将最后一个元素推向下一行。尝试备份您的保证金/填充，看看会发生什么。 –

首先，你要确定你的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底部。

来源

2013-12-16 15:30:03

啊哈！奇迹般有效！非常感谢你！！ – user3107811

很高兴为您解决:-) –

你必须使用Javascript功能来检测点击链接天气（添加一个ID为OU类），并在弹出的点击秀（google了jQuery插件）天气小工具。

来源

2013-12-16 15:22:10

这似乎并不准确。你能链接到你参考的来源吗？ – Nick

你的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事件的标签，如果你想。

来源

2013-12-16 15:32:07 Bic

悬停在导航链接显示一个单独的DIV

回答

相关问题