<ul class="tip">
<li><a href="#">移动硬盘1</a></li>
<li><a href="#">移动硬盘1</a></li>
<li><a href="#">移动硬盘1</a></li>
<li><a href="#">移动硬盘1</a></li>
<li><a href="#">移动硬盘1</a></li>
</ul><li class="optn"><a href="#">电脑软件</a></li>
<ul class="tip">
<li><a href="#">电脑软件1</a></li>
<li><a href="#">电脑软件1</a></li>
<li><a href="#">电脑软件1</a></li>
<li><a href="#">电脑软件1</a></li>
<li><a href="#">电脑软件1</a></li>
</ul><li class="optn"><a href="#">数码产品</a></li>
<ul class="tip">
<li><a href="#">数码产品1</a></li>
<li><a href="#">数码产品1</a></li>
<li><a href="#">数码产品1</a></li>
<li><a href="#">数码产品1</a></li>
<li><a href="#">数码产品1</a></li>
</ul>
</ul>
</li>
</ul>
<span></span>
</body>
</html>
遇到的问题及解决办法：
1、鼠标指针位置获取：
a、function(e){alert(e.pageX); alert(e.pageY);}//获取鼠标当前位置
b、获取元素的位置： $(this).offset().top $(this).offset().left//获取元素的位置
注：以上两种方法均在jQuery中适用，若使用JS中，需做适当改动
2、两个区块叠加时，边框处理问题：
需要的效果是：
但是现实的效果却是：
这个问题困扰了我半天，也在一个群里求救，一个好心的兄弟给我一段JS代码，结果我还是没用上，最后看了一个选项卡的实例，终于把这个问题搞定了。解决办法是：
人为加宽父菜单的宽度，然后把右边框设置成0，最后记得把父标签的放在最顶端显示
父菜单： border-right:0; z-index:100; position:relative; 宽度覆盖子菜单
子菜单： 和父菜单背景色一样
