最近工作项目中，需要做一个下拉导航，类似下图所示的效果。鼠标划过下拉父级菜单，下拉出子栏目，大家可以看到，整个下拉菜单的宽度比较宽，下拉菜单又是相对父级导航栏目定位，那么问题来了… 当鼠标划过靠近页面右侧的父级导航栏目时就会出现下拉菜单超出屏幕。这时就动态计算下拉菜单是否超出页面。
如何计算？
计算方法其实很简单，先计算出页面距离浏览器右边的距离：屏幕宽度 – 页面主宽度（比如1200px）/ 2
接下来计算下拉菜单距离页面右侧的距离：屏幕宽度 – 下拉菜单宽度 – 下拉菜单距离页面左边的距离
如果下拉菜单距离页面右侧的距离大于页面距离浏览器右边的距离则证明超出了范围，需要对下拉菜单重新设置定位方式。
这里用jQuery写一下上面计算的代码：
var pageRightWidth = ($(window).width() - $("#page").width()) / 2;
var subMenuRightWidth = $(window).width() - $(".submenu").width() - $(".submenu").offset().left;
那么这里问题又来了，计算下拉菜单距离页面右侧的距离时，发现一直获取不到offset().left，获取的数值一直等于0，最后发现，需要先让下拉菜单显示出来，才能有效的获取offset().left，隐藏的元素是获取不到的。