纯css实现二级下拉菜单

听说很多小白菜鸟还不会做二级菜单，小编简单教大家怎么用纯css实现二级下拉菜单。

实现的原理很简单，就是用display和hover就行了。同理，也可以用这个方法实现三级菜单效果。

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>纯css实现导航下拉菜单</title><style>a{color: white;text-decoration: none;}nav li{display:block;float: left;width: 150px;height:30px;line-height: 30px;text-align: center;background: #000;position: relative;}nav li a{display:block;}nav li ul{display: none;width: 150px;position: absolute;left: 0;top: 30px;padding: 0;margin: 0;background-color: red;}nav li:hover ul{display: block;}</style>
</head>
<body><nav><li><a href="">菜单一</a><ul><a href="">下拉菜单1</a><a href="">下拉菜单1</a><a href="">下拉菜单1</a><a href="">下拉菜单1</a><a href="">下拉菜单1</a></ul></li><li><a href="">菜单二</a><ul><a href="">下拉菜单2</a><a href="">下拉菜单2</a><a href="">下拉菜单2</a><a href="">下拉菜单2</a><a href="">下拉菜单2</a></ul></li><li><a href="">菜单三</a></li><li><a href="">菜单四</a></li><li><a href="">菜单五</a></li></nav>
</body>
</html>

效果图如下

纯css实现二级下拉菜单相关推荐

php下拉框css样式,纯CSS实现的下拉菜单
实现效果实现代码 html Home WordPress Themes Plugins Tutorials Web Design Resources Links Tutorials HTML/CSS ...
纯css 下拉选择,纯CSS实现的下拉菜单
实现效果实现代码 html home wordpress themes plugins tutorials web design resources links tutorials html/css ...
纯css制作三级下拉菜单
css本身的功能就挺强大的,尤其是css3出来之后,大部分特效只用css3就能完成了,无需再费心思去想js怎么怎么做jQuery怎么怎么做,代码简洁质量轻巧.下面是本人用纯css制作的三级下拉菜单效果 ...
css表格中下拉菜单怎么设置,css如何实现下拉菜单？css实现下拉菜单的方法（完整代码）...
本篇文章给大家带来的内容是关于css如何实现下拉菜单?css实现下拉菜单的方法(完整代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. /*盒子,相对定位*/ .dropdown{ ...
css3如何写下拉菜单,css如何实现下拉菜单超详细
首页 >web前端>css教程>正文 css如何实现下拉菜单?css实现下拉菜单的方法(完整代码) 原创2019-04- 本篇文章给大家带来的内容是关于css如何实现下拉菜单?css ...
兼容IE各版本的纯CSS二级下拉菜单
这是一个标准的CSS下拉菜单制作教程,有针对目前流行的IE6/IE7/IE8不同版本的CSS代码,因此可以在IE之间完全兼容,不过其它的浏览器像火狐/GG浏览器之类的没有测试,如果兼容IE8的话,那么 ...
纯CSS3实现宽屏二级下拉菜单
今天我们要来分享一款基于纯CSS3的宽屏二级下拉菜单,这款菜单的子菜单在展开的时候是很宽敞的,菜单项中可以自定义格式的内容,非常实用,也很大气.由于是用纯CSS3实现,所以这款下拉菜单不用运行Java ...
仿安居客首页导航栏及二级下拉菜单Html+Css+JavaScript
这次仿写的是安居客的首页导航栏,要求实现二级下拉菜单首先,这是原网页的效果接下来是html部分 <div class="box1"><ul id=" ...
CSS3蓝色宽屏二级下拉菜单DEMO演示
2019独角兽企业重金招聘Python工程师标准>>> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transition ...
html二级下拉菜单模板,基于jQuery实现二级下拉菜单效果
本文通过代码实例详细介绍一下简单的二级下拉菜单是如何实现的,当然还有更为复杂的二级菜单,不过先学会如何制作简单的,分享给大家供大家参考,具体内容如下代码如下: 下拉菜单 nav a{ text-de ...

纯css实现二级下拉菜单

纯css实现二级下拉菜单相关推荐

最新文章

热门文章