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

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

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

    
 
        
 
            
Home 
 
            
Forum 
 
            
Pictures 
 
            
Videos 
 
            
Technology 
            
Politics 
 
            
World Issues 
 
            
Contact  
            
Weather 
testing
 
        
 
    
 

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

这是它的外观图像。