滑过 产品介绍 显示下面的子菜单？
onmouseover是鼠标移动到某元素执行的鼠标事件。
onmousemove是鼠标在某元素上移动执行的事件。
你先把这两个分清楚了，根据你的需求是
先获取你要鼠标滑过的元素 也就是产品介绍这个a元素,你给其设置一个id假如设置其为product
那么先获取他
var product=document.getElementById('product')
再获取你要显示的子菜单元素productInfo
var productInfo=document.getElementById('productInfo')
productInfo.style.display='none'//设置其隐藏，如果CSS里已经隐藏，此步可以省略。
然后设置其鼠标事件，应该选择onmouseover
product.onmouseover=function(){
productInfo.style.display='block'//鼠标移动到product元素上让其子菜单显示。
}
product.onmouseout=function(){
productInfo.style.display='block'//鼠标移出product元素上让其子菜单隐藏。
}
如果你要让每个子菜单都读取他的子菜单可以循环遍历实现。思路相同。
只改css部分的代码就可以了
首先
#nav li {float: left
width: 80px
background: #CCC
position: relative
}
加上 "position: relative" 属性，是为了使它的子级元素能够根据该元素的位置定位。
然后当然是修改这里
#nav li ul {line-height: 27px
list-style-type: none
text-align: left
width: 180px
position: absolute
bottom: 25px
}
设定 "bottom: 25px" 使该元素的底部和其上级元素的顶部对齐。
最后再调整整个菜单的位置，让二级菜单不超出窗口范围就可以了。
