0

想知道是否有更好的方法来处理我正在尝试做的事情。我制作了一个基本的下拉导航菜单，其中菜单栏是 li 和类元素，其高度设置为隐藏，溢出属性设置为隐藏，然后在高度上设置动画以在悬停时显示动画的“下拉”部分用鼠标结束。然而，我发现当菜单元素与它们发生碰撞时，其他网页元素（如主要内容）会被推送并重新定位。我通过使受影响的元素绝对定位来临时解决这个问题，但我不禁觉得有一种更好、更有效的方法来解决这个问题。

有什么办法可以使缺少更好单词的导航元素在定位方面被“忽略”？

这是在实践中 - 第一个“文章”区域已被绝对定位 - http://gamearticlesite.bbdesigns.ca/index.html

编码：

jQuery

 //When mouse rolls over  
    $("li.extend").mouseover(function(){  
        $(this).stop().animate({height:'250px'},{queue:false, duration:500})  
    });  

    //When mouse is removed  
    $("li.extend").mouseout(function(){  
        $(this).stop().animate({height:'35px'},{queue:false, duration:500})  
    });

CSS：

#headerNav ul{
    list-style-type: none;
    color:#efefef;  
    margin:0;
    margin-left:75px;
    padding:0;  
}

#headerNav ul li{
    width:125px;  
    height:35px;  
    float:left;  
    color:#efefef;  
    text-align:center;      
    margin-left:10px;
    margin-right:10px;
    overflow:hidden;
}
4

2 回答 2

1

The correct answer was that yes, Absolute Positioning is the way to solve this, but to use it on the navigation menu. In the example posted, on the ul element, not the individual li elements that would animate as that could cause issues with positioning of the li elements within the ul element.

Setting the position to position:absolute for the ul and giving a z-index property to make sure it's 'on top' of the elements it clashes with made everything work out just fine.

于 2012-12-16T08:27:22.567 回答
0

利用

float:left

或者

position:absolute
于 2012-12-16T06:09:44.193 回答