纯CSS制作二级导航菜单(纵向)，不用JS/jquery，响应速度快

江山如画 • 2018年9月19日下午5:29 • 网页特效 • 阅读 4745

今天分享一款纯CSS制作的二级导航菜单，不用JS/jquery，响应速度快。

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>制作二级导航菜单(纵向)</title> <style type="text/css"> #menu{ width: 200px; border: 1px solid #999; } #menu ul{ margin: 0px; padding: 0px; list-style: none;/* 隐藏默认列表符号*/ } #menu ul li{ background: #06C; height: 35px; line-height: 35px; /*行距*/ text-align: center; border-bottom: 1px solid #999; position: relative; } a{ display: block; font-size: 13px; color: #FFF; text-decoration: none;/*隐藏超廉价默认下划线*/ } a:hover{ color:#F00; font-size: 14px; } #menu ul li ul{ display: none;/*默认隐藏*/ top:0px; width: 200px; border: 1px solid #ccc; border-bottom: none; position: absolute; left: 200px; } #menu ul li:hover ul{ display: block; } #menu ul li:hover ul li a{ display: block; } </style> </head> <body> <div id="menu"> <ul> <li><a href="#">前端</a> <ul> <li><a href="http://www.125jz.com/course/html">HTML/HTML5</a></li> <li><a href="http://www.125jz.com/course/css">CSS/CSS3</a></li> <li><a href="http://www.125jz.com/course/js">JavaScript/jquery</a></li> </ul> </li> <li><a href="#">设计</a> <ul> <li><a href="http://www.125jz.com/design/appreciate">设计欣赏</a></li> <li><a href="http://www.125jz.com/design/images">设计素材</a></li> </ul> </li> <li><a href="http://www.125jz.com/">网页设计</a></li> <li><a href="http://www.125jz.com/">网页制作</a></li> </ul> </div> </body> </html>

Tips:You can change the code before run.

125jz网原创文章。发布者：江山如画，转载请注明出处：http://www.125jz.com/2611.html

赞 (0)

江山如画管理团队

微信扫一扫

微信扫一扫

支付宝扫一扫

支付宝扫一扫

CSS+JS制作纵向点击展开的二级导航菜单

上一篇 2018年9月19日下午5:16

垂直（纵向）二级导航菜单

下一篇 2018年9月19日下午7:46

网页特效

CSS+JS制作纵向点击展开的二级导航菜单

网页制作时，如产品分类目录、导航等，需要制作纵向二级导航菜单，点击展开分类显示子目录，再点击收缩起目录。中国网页设计分享的二级导航菜单使用CSS+JS制作，调用简单方便，可移植、可修改。网页HTML代码（放在body区域）： <div id=”my_menu” class=”sdmenu”> <div> <span>教…

江山如画
2018年9月19日
3.5K00
网页特效

点击弹出带关闭按钮的窗口特效（兼容所有浏览器）

弹出页面被大多浏览器拦截，现在多数改为弹出窗口，即通过弹出层来实现，今天中国网页设计给大家分享两个点击弹出带关闭按钮的窗口代码。 jquery实现可拖动弹出窗口特效 <html > <head> <title>jquery实现可拖动弹出窗口特效-带关闭按钮</title> <script type=&qu…

江山如画
2018年5月9日
3.9K00
网页特效

100种精美的网页时钟特效，总有一款是你需要的

web骇客收集了100种使用CSS+JS+HTML制作的时钟、钟表、手表等特效，分为漂亮的时钟特效、有创意的时钟、电子钟，每一种实现都提供源代码，可以方便网页制作爱好者们拷贝使用，如果你需要在网页中添加时钟特效，在这里一定会有一款你喜欢的。

江山如画
2018年9月27日
6.7K05
源码下载

ScrollPicLeft.js实现的图片前后切换效果-源码下载

ScrollPicLeft.js实现的图片的前后切换效果，适用于网页中的证书展示、推荐商品之类的栏目。功能：可以手动点击前后切换箭头按钮，进行图片的翻页，浏览上一张，下一张的效果。特点：代码精简，不需要使用JQuery，功能强大，使用非常的简单，便利。！在网页引入ScrollPicLeft.js <script type=”text/javasc…

江山如画
2019年11月1日
3.4K01
网页特效

JS+CSS制作的动态二级下拉导航菜单

<!doctype html> <html> <head> <meta charset="utf-8"> <title>动态二级下拉导航菜单</title> <style type="text/css"> *{margin:0;padd…

江山如画
2018年12月31日
2.6K00
网页特效

带左右箭头控制的网站幻灯片轮播切换效果

一款比较实用的带左右箭头按钮控制的jquery slider图片插件，网站幻灯片焦点图片轮播切换代码下载。页面代码非常简洁，适合调用更改。 <div class=”slider”> <div class=”slider-img”> <ul class=”slider-img-ul”> <li><img …

江山如画
2019年4月10日
9.9K07

发表回复

登录后才能评论