Question

javascript下拉菜单定位的问题

如题。想要的效果是：当鼠标移动到div1上时弹出div2，在不特别指定div2的位置的情况下（不定义left和top）怎样把div2定位到div1的下方呢？（要用到offsetLeft和offsetParent吧，请具体演示，加分~）
怎样计算主调DIV的高度，而不用自己指定呢？还有就是怎么用偏移（offsetLeft等）精确指定DIV2的位置呢？
给点解释~~
是否嫌分太少噻~~可以加~~

Answer 1

//计算菜单位置
function resize(){
var devi = 0;//火狐浏览器如果出现y轴滚动条会导致坐标便宜7像素
if((document.body.scrollWidth-document.body.clientWidth)>0){
devi = -7;//这个判断就是判断是否火狐浏览器
}

document.getElementById("div2").style.left = document.getElementById("div1").getBoundingClientRect().left + devi + "px";//div2的横坐标=div1的横坐标+火狐浏览器的偏移量
document.getElementById("div2").style.top = parseInt(document.getElementById("div1").getBoundingClientRect().top) + 58 + "px";//div2的纵坐标=div1的纵坐标+div1的高度
}
devi是为了保证firefox浏览器在出现滚动条时候的兼容
那个58就是div1的height+1的距离

这是我以前写的代码 我直接粘过来的 你要div的高就是document.getElementById("div1").style.height

不用offsetLeft是因为这个属性不能保证ie以外浏览器支持

Answer 2

//JAVASCRIPT代码
function displaySubMenu(li) {
var subMenu = li.getElementsByTagName("ul")[0];
subMenu.style.display = "block";
}
function hideSubMenu(li) {
var subMenu = li.getElementsByTagName("ul")[0];
subMenu.style.display = "none";
}

//html代码
<ul class="nav">
<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"><a href="#">下拉菜单</a>
<ul class="subList">
<li>a</li>
<li>b</li>
<li>a</li>
</ul>
</li>
</ul>

//CSS代码
#nav ul li{width=100px;height=50px;overflow:hidden}
#nav ul li a{display:black;width:100px;height:50px;}
ul#subList{display:none;position:absolute;}
以上代码设定了子菜单默认不显示，当鼠标移动到主菜单的li时，通过JS显示子菜单了。
貌似没有定位问题，如果需要修改定位只需要修改ul#subList的padding即可