CSS实现常用菜单（一）

2019独角兽企业重金招聘Python工程师标准>>>

在写网站的时候，每个网页的导航菜单都是必不可少的，下面我们就把实际开发经常会遇到的菜单总结一下。

1、普通菜单

把鼠标移到菜单内容上，出现二级菜单而且菜单的背景颜色变成深灰色。

（1）使用HTM+CSS来实现

HTML代码如下：

 

最外层是ul包含5个li,分别是首页，课程大厅，学习中心，经典案例，关于我们。二级菜单也是在当前li下的ul。每个li里面都包含链接a。

CSS代码如下：

 

（2）使用javaScript代码实现

在鼠标移入和移出时绑定onmouseover和onmouseout事件。鼠标移入时，显示二级菜单，鼠标移出时，隐藏二级菜单。

（3）使用jquery代码实现

 

在鼠标移入和移出时绑定onmouseover和onmouseout事件。鼠标移入时，使用show方法显示二级菜单，鼠标移出时，使用hide方法隐藏二级菜单。

转载于:https://my.oschina.net/u/2971691/blog/891811