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

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

今天分享一款纯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

网页制作

鼠标放上去，图片上方动态显示半透明说明文字（源码）

<style> .itemInWorks{ width: 240px; height: 150px; border-radius:5px; font-size: 20px; font-weight: 600; color: #FFFFFF; text-align: center; line-height: 40px; background: ur…

江山如画
2020年2月20日
12.2K00
网页特效

点击按钮发送验证码，隔10秒再次发送倒计时效果-JS代码

为了防止用户恶意获取短信验证码或邮箱验证，在网站制作时会考虑在点击获取验证码的按钮上做个倒计时的效果。需要隔10秒再次发送，实现这个功能，需要用到setInterval和clearInterval。 setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。 setInterval() 方法会不停地调用函数，直到 clearIn…

江山如画
2019年10月31日
6.8K00
网页特效

jQuery插件实现省、市、区县三级联动代码，调用非常简单

在《中国省、市区二级联动下拉选择框-JS源码》文章中我们分享了省、市区二级联动的JS实现代码，今天125建站网给大家分享一款中国省、市、区县三级联动的代码，通过jQuery插件实现，调用非常简洁。 HTML结构基本的HTML结构是使用一个<div>容器来包裹一组<select>元素。 <div><!– conta…

江山如画
2019年6月5日
6.0K01
网页特效

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

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

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

超酷的HTML5 3D图片旋转动画特效

中国网页设计分享的一款HTML5 3D图片动画特效，使用js动画框架TweenMax 技术实现。这款HTML5 3D动画非常酷，当在图片上面拖动鼠标时，图片会在垂直方向分裂出数块小长方体，然后每一个小长方体沿着鼠标拖动的方向旋转。效果演示源码下载

江山如画
2018年9月28日
17.4K00
网页制作

导航特效：jquery实现当前（活动）菜单样式变化

用户点击导航或菜单上不同的栏目，被选中的导航栏目会变换样式，出现图片或背景颜色的变化，用于标识是否是当前栏目或活动选项。本教程使用jquery实现导航菜单当前（活动）菜单样式变化，导航菜单模式用的是背景颜色，你可以换成背景图片以符合建站需要。当前（活动）菜单样式变化实现原理在html代码中给首页（默认选中）加上class名cur <a href=…

江山如画
2018年2月8日
5.6K00

发表回复

登录后才能评论