小编use*_*811的帖子

我想做的是，在导航栏中有一个名为“天气”的链接，当您将鼠标悬停在其上或单击它时，我希望它显示一个下拉列表，其中包含天气网络小部件。

到目前为止，这就是我所拥有的。悬停部分起作用，但是它将“天气”链接推到导航栏的底部。我如何使其恢复原来的位置？

    <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 …