Javascript 使下拉导航菜单不影响其他元素的定位

我想知道是否有更好的方法来处理我要做的事情。我制作了一个基本的下拉导航菜单，其中菜单栏是li和class元素，设置了高度，溢出属性设置为hidden，然后在高度上设置动画，在鼠标悬停时显示动画的“下拉”部分。然而，我发现当菜单元素与其他网页元素发生冲突时，其他网页元素（如主要内容）会被推送并重新定位。我通过使受影响的元素处于绝对位置来权宜之计解决了这个问题，但我忍不住觉得有更好、更有效的方法来解决这个问题

有没有办法让导航元素因为缺少更好的词而被“忽略”定位

在实践中，第一个“物品”区域被设置为绝对位置-

守则：

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:

使用

或

---

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

---

对于ul，将position设置为position:absolute，并提供z-index属性，以确保它位于与之冲突的元素的“顶部”，从而使一切正常工作

绝对位置是最常用的方法。在浏览器控制台中查看一些菜单，并查看所使用的css。这很容易做到，而且很可能是很好的学习体验在导航菜单上使用绝对定位还是像我一样的其他元素？我一直在尝试查看使用原生chrome“inspect element”工具的网站，但大多数网站都有大量的CSS和JS文档，因此很难将它们区分开来。菜单元素……我误读了你的修复方法。浏览这个网站。。。。。。。这家伙多年来一直在玩尖端菜单CSS。了解如何在浏览器控制台中查看CSS…这同样非常简单。去检查一些菜单插件，绝对定位是最好的方法。它非常适合常见的下拉列表需要。但不要将绝对定位应用于收割台。不需要。将它应用到下拉列表本身：“但我忍不住觉得有更好、更有效的方法来解决这个问题”——为什么？这正是绝对定位想要达到的效果。（除了charlietfl说的那样，你做得有点倒退——你应该让菜单项绝对定位。）

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

float:left

position:absolute