css实现下拉框导航条
CSS 实现 下拉框 导航条
2023-09-11 14:22:19 时间
html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>导航栏</title> <link rel="stylesheet" href="css/test.css" /> <script type="text/javascript" src="js/jquery-1.11.3.min.js" ></script> </head> <body> <div class="nav"> <ul class="list"> <li><a href="#">首页</a></li> <li><a href="#">职业课程</a> <div class="down"> <a href="#">课程库</a> <a href="#">知识体系图</a> <a href="#">职业路径图</a> <a href="#">系列课程</a> </div> </li> <li> <a href="#">就业学习</a> <div class="down"> <a href="#">Web前端开发</a> <a href="#">Android开发</a> <a href="#">JavaWeb开发</a> </div> </li> <li> <a href="#">极客社区</a> <div class="down"> <a href="#">wiki</a> <a href="#">技术问答</a> <a href="#">社群</a> <a href="#">资源分享</a> </div> </li> <li> <a href="#">极客+</a> <div class="down"> <a href="#">高校合作</a> <a href="#">极客人才联盟</a> </div> </li> </ul> </div> </body> </html>
css
*{padding:0; margin:0;} li{ list-style:none} a{ text-decoration:none;} .nav{ width:100%; height:40px; background:#222; margin-top:100px;} .nav .list{ width:1000px; height:40px;margin:0 auto;} .list li{ float:left; position:relative;} .list li>a{ padding:0 30px; line-height:40px; display:block; color:#aaa; font-size:16px;} .list li:hover>a{ background:#333; color:#fff;} .list li:hover .down{ display:block;} .list li .down{ width:150px; background:#333; position:absolute; top:40px;left:0; display:none;} .list li .down a{ display:block; line-height:30px; color:#aaa; font-size:14px; padding-left:30px;} .list li .down a:hover{ color:#fff;}
效果:
相关文章
- 史上最牛逼的纯CSS实现tab选项卡,闪瞎你的狗眼
- css流程图、步骤图,流程线与环节分别实现,支持单环节、多环节情况。scss生成CSS
- 用CSS实现Tab页切换效果
- CSS - 解决子级用css float浮动 而父级div没高度不能自适应高度
- CSS - 实现荧光边框
- 当当网首页——CSS代码
- 购物车的功能——CSS源码
- CSS魔法堂:再次认识font
- CSS绝对定位和相对定位 position: absolute/relative
- vue.js 3.2.22:用useIntersectionObserver实现滑动到div可见时才运行css动画(@vueuse/core@7.0.3)
- [CSS] Using inline-grid to gain easy control over gap and size
- [CSS3] Make a One-time CSS Animation that Does Not Revert to its Original Style
- CSS如何实现把鼠标放在行上整行变色
- 简述css中的不同盒模型的特性,以及应用,介绍box-sizing属性
- 用纯CSS实现3D立方体效果
- html+css+js实现打砖块小游戏
- 绝对定位多个字居中显示的css
- myeclipse egit 安装失败 org.eclipse.e4.ui.css.swt.theme 0.0.0
- 3行3列表格 table实现,div+css实现
- 【CSS】css常用复杂选择器都有哪些?看这一篇就够了_07
- 【CSS】css转换、css过渡、css动画_09