使用JavaScript / jQuery应用位置绝对样式

2023年12月14日 272次阅读

我正在建立一个带有右对齐导航的网站.

最后一个菜单项下拉菜单离开页面,因为它位于父页面左侧的绝对位置.

我正在尝试为我的菜单创建一个解决方案.

jsfiddle –http://jsfiddle.net/ashconnolly/6gjVr/

我不能硬编码pos左-xx样式,因为最后一个菜单项的宽度会有所不同(由于里面的文字),因此我使用了js.
我几乎破解了它,但我只需要在悬停时将变量应用为绝对左侧的位置.
可能有更好的css解决方案,但我找不到一个.

任何帮助表示赞赏！ ：d

编辑：更新说明.

最佳答案 您已经计算了最后一个菜单的左侧,为什么不使用？

$(document).ready(function () {
var menuitemwidth = document.getElementById("last-menu-item").offsetWidth;
var menuitemdropdownwidth = document.getElementById("last-menu-item-drop-down").offsetWidth;
//alert(menuitemwidth);
var leftval = menuitemdropdownwidth - menuitemwidth;
//alert(leftval);
    $("#last-menu-item").mouseenter(function(){
        $("#last-menu-item-drop-down").css({'position':'absolute','left':'-'+leftval+'px','display':'block'});
    });
    $("#last-menu-item").mouseleave(function(){
        $("#last-menu-item-drop-down").css({'display':'none'});
    });

});

Check Here

点赞