HTML横向菜单弹出鼠标移动效果

HTML横向菜单弹出鼠标移动效果

学习目地：今天要讲的是一个横向弹出菜单，并在弹出的二级菜单附加鼠标移动效果。下面是代码准备，HTML语言+CSS语言+鼠标事件伪类+容器概念。

代码准备

可以从图1代码中看出设计思路是，用HTML标签当成一个容器，在容器中加入多重HTML无序列表嵌套，在用CSS语言属性display控制html语言无序列表结构框架隐藏显示，最后加入鼠标事件伪：hover控制HTML的鼠标动作，来实现横向弹出鼠标移动事件菜单。

（图片来自网络，图1）

把图1中的代码输入到记事本中，然后把代码另存为HTML文件如图2

（图片来自网络，图2）

打开图2，如果可以正确显示出图2的效果，就说明HTML语言的ul和ｌｉ标签已经成功给控制了。当我们把鼠标移动到图２中的文字上，那么就会弹出一个无序列表框，那么就说明我们的鼠标伪能已经正常运行了，如图３.

（图片来自网络，图3）

（图片来自网络，图4）

**************EMD**************

部分内容参考网络，本文只限于学习交流请勿它用

***********************************