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

Here is an image看起来像什么。

Answer 1

首先，您应该修复HTML。用这个替换你的divs行（为了我的答案的可读性，我正在重新格式化）：

<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的底部。

Answer 2

你必须使用Javascript来检测点击天气链接（在一个类中添加一个id），然后在弹出窗口（google a jquery plugin）中单击显示天气小部件。

Answer 3

您的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事件放在标记中。

将鼠标悬停在导航链接上以显示单独的div

3 个答案: