CSS实现常用菜单(一)

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

1、普通菜单

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

CSS实现常用菜单(一)_第1张图片

(1)使用HTM+CSS来实现

HTML代码如下:

CSS实现常用菜单(一)_第2张图片

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

CSS代码如下:

CSS实现常用菜单(一)_第3张图片

(2)使用javaScript代码实现

CSS实现常用菜单(一)_第4张图片

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

(3)使用jquery代码实现

CSS实现常用菜单(一)_第5张图片

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

你可能感兴趣的:(CSS实现常用菜单(一))