css实现顶部导航条及下拉框
一、原理二、HTML三、CSS1.设置外部容器样式2.设置内部容器样式3.设置导航条中的元素4.设置下拉框元素5.设置父元素6.效果展示一、原理
1. 设置外部盒子来充当导航条2. 设置内部盒子来盛放导航条中元素3. 导航条中元素使用无序列表并去掉下划线及小圆点，使其浮动以达到水平摆放的效果4. 鼠标移入时显示下拉框（隐藏元素），则鼠标移入的元素和下拉框元素为兄弟关系，而且两者必须要有相同的父元素5. 隐藏的元素使用决定定位，兄弟元素使用相对定位，使隐藏的元素相对于兄弟元素定位6. 将伪类：hover绑定给父元素，使父元素触发引出下拉框事件7. 设置下拉框的层级比其他元素高，使其悬浮时盖住其他元素以显示出来
二、HTML
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>boke</title><link rel="stylesheet" href="./boke.css"></head><body><!-- 外部容器--><div class="top-bar-wrapper"><!--内部容器--><div class="top-bar clearfix"><!--设置父元素--><div class="top-nav"><!-- 鼠标移入出现下拉框元素--><ul class="nav"><li><a href="#">X系列</a></li><li><a href="#">S系列</a></li><li><a href="#">T系列</a></li><li><a href="#">Y系列</a></li><li><a href="#">iQOO手机</a></li><li><a href="#">智能硬件</a></li><li><a href="#">商城</a></li><li><a href="#">服务</a></li></ul><!-- 下拉框元素--><div class="list"></div></div></div></div></body></html>
三、CSS
1.设置外部容器样式
/*设置外部容器样式*/.top-bar-wrapper{background-color: dimgray;height:60px;margin: 0 auto;}
2.设置内部容器样式
/*设置内部容器样式*/.top-bar{/*固定宽度*/width: 900px;/*水平居中*/margin: 0 auto;position: relative;}
3.设置导航条中的元素
.nav li{float: left;/*去除无序列表中的下划线*/list-style: none;/*文字在父元素中居中*/line-height: 40px;}.nav a{/*将行内元素变为块元素*/display: block;/*去除无序列表中的小圆点*/text-decoration: none;/*字体颜色*/color: white;/*字体大小*/font-size: 17px;/*设置内边距*/padding: 0 27px;}/*鼠标移入时a的效果*/.nav a:hover{color: deepskyblue;}
4.设置下拉框元素
/*列表样式*/.top-nav .list{display: none;width:900px;height: 400px;background-color: dimgray;top: 0 ;position: absolute;z-index: 999;}
5.设置父元素
.top-nav{float: left;}.top-nav:hover .list{display: block;}
.nav{position: relative;z-index: 9999;}
