Question

想知道是否有更好的方法来处理我正在尝试做的事情。我做了一个基本的下拉导航菜单，其中菜单栏是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;
}

Answer 1

正确的答案是肯定的，绝对定位是解决这个问题的方法，但要在导航菜单上使用它。在发布的示例中，在ul元素上，不会因为那样设置动画的单个li元素可能会导致在ul元素中定位li元素的问题。

将位置设置为位置：ul的绝对值，并给出一个z-index属性以确保它与它冲突的元素“在顶部”使得一切正常。

Answer 2

使用

float:left

或

position:absolute

制作下拉导航菜单不会影响其他元素定位

2 个答案: