纯css实现二级菜单栏
2016-04-10 01:25
549 查看
用纯css实现二级菜单的原理还是比较简单的,但是不亲自去实现一下碰到了一时半会还真不一定搞的定。
为了简单说明其核心原理,这里不多添加样式。
先上效果图:
![](http://img.blog.csdn.net/20160410005647073?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
可以看到,结构是:首先建立一级菜单栏,使用一个无序列表既可以实现。
然后再在一级菜单栏里面,每个需要添加二级菜单栏的菜单里面再添加一个用于表示二级菜单栏的无序列表。
对一级菜单栏里面的单个菜单项目使用:hover即可以实现功能。新手可以自己按照这个思路试试,感觉困难请参考下面我提供的代码
附上我的代码参考:
html部分
![](http://img.blog.csdn.net/20160410010857468?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
css部分
![](http://img.blog.csdn.net/20160410011252080?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
怎么样,是不是很简单呀!
对了,这里还有一个小问题,请仔细看我在文章一开始处提供的效果图,为了方便观察再把图贴过来:
![](http://img.blog.csdn.net/20160410005647073?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
当我把鼠标移动到一级菜单栏的菜单“服务”里,再把鼠标移到其下面的二级菜单栏的菜单“程序开发”,再往下移动时,实际上鼠标是进入了当时一级菜单栏的菜单“联系我们”里,但是一下子全都收回去了,“联系我们”的二级菜单栏闪了一下里面消失了。这是由于:hover的特性,在离开:hover的元素时,这个:hover元素就不是:hover状态了,离开菜单"程序开发"时,我们也已经离开了它的父元素li,对它的:hover状态添加的样式也消失了,这样"服务"下的二级菜单栏就会消失,菜单"联系我们"也就随之位置发生改变,收回去了,这样菜单"联系我们"所在的li本该是:hover状态此时也由于位置的收缩而失去了:hover状态,因此它的二级菜单栏就会在出现一瞬间后立马消失了。
解决办法参考我写的纯CSS三级菜单栏,这里贴上链接:纯CSS实现三级菜单栏
为了简单说明其核心原理,这里不多添加样式。
先上效果图:
可以看到,结构是:首先建立一级菜单栏,使用一个无序列表既可以实现。
然后再在一级菜单栏里面,每个需要添加二级菜单栏的菜单里面再添加一个用于表示二级菜单栏的无序列表。
对一级菜单栏里面的单个菜单项目使用:hover即可以实现功能。新手可以自己按照这个思路试试,感觉困难请参考下面我提供的代码
附上我的代码参考:
html部分
css部分
怎么样,是不是很简单呀!
对了,这里还有一个小问题,请仔细看我在文章一开始处提供的效果图,为了方便观察再把图贴过来:
当我把鼠标移动到一级菜单栏的菜单“服务”里,再把鼠标移到其下面的二级菜单栏的菜单“程序开发”,再往下移动时,实际上鼠标是进入了当时一级菜单栏的菜单“联系我们”里,但是一下子全都收回去了,“联系我们”的二级菜单栏闪了一下里面消失了。这是由于:hover的特性,在离开:hover的元素时,这个:hover元素就不是:hover状态了,离开菜单"程序开发"时,我们也已经离开了它的父元素li,对它的:hover状态添加的样式也消失了,这样"服务"下的二级菜单栏就会消失,菜单"联系我们"也就随之位置发生改变,收回去了,这样菜单"联系我们"所在的li本该是:hover状态此时也由于位置的收缩而失去了:hover状态,因此它的二级菜单栏就会在出现一瞬间后立马消失了。
解决办法参考我写的纯CSS三级菜单栏,这里贴上链接:纯CSS实现三级菜单栏
相关文章推荐
- 鼠标悬停图片、文字css3效果
- 浮动窗口-固定窗口-css实现窗口浮动-jq浮动窗口-三种方法
- 纯css3鼠标经过出现文字或图片鼠标移走消失
- jq鼠标经过图片消失和出现边框
- 键盘样式风格有关设置-iOS开发
- CSS对齐&尺寸&分类&导航栏
- 内建与外联css与js的优劣
- CSS position 定位知识细节
- CSS结构伪类选择器
- <css 九>margin
- CSS 入门学习篇 - 2
- 清除浮动的原理和方法
- 初识CSS
- CSS换行:word-wrap、word-break和text-wrap差别
- 4-CSS-选择器-一般属性
- CSS3实例教程:详解calc()函数功能
- 转载:css隐藏元素的几种方案
- CSS3阴影 box-shadow的使用和技巧总结
- 5种css图片浮动效果
- css 的几个选择器