阴阳师官网导航栏
通过css html实现阴阳师官网的顶部导航栏
具体样式
下拉列表
下拉列表的实现
下面一起看看代码
<div class="header"><div class="menu">游戏全目录</div><a href="#"><img src="images/logo_b5525b7.png" alt=""></a><div class="sale">25元专属券限时领！</div></div><!--头部结束--><!--导航开始--><div class="nav"><div class="nav-wrap"><ul><li class="nav-active"><a href="#">官网首页</a></li><li><a href="#">新闻资讯</a></li><li><a href="#">官网首页</a></li><li><a href="#">官网首页</a></li><li><a href="#">官网首页</a></li><li><a href="#">官网首页</a></li><li><a href="#">官网首页</a></li><li><a href="#">官网首页</a></li><li><a href="#">官网首页</a></li><li><a href="#">官网首页</a></li><li><a href="#">官网首页</a></li><li><a href="#">官网首页</a></li><li><a href="#">官网首页</a></li><li><a href="#">官网首页</a></li></ul><div class="search"></div></div><div class="nav-list"><a href="#"><img src="images/ss_4_645f86e.jpg" alt=""></a><a href="#"><img src="images/ss_4_645f86e.jpg" alt=""></a><a href="#"><img src="images/ss_4_645f86e.jpg" alt=""></a><a href="#"><img src="images/ss_4_645f86e.jpg" alt=""></a><a href="#"><img src="images/ss_4_645f86e.jpg" alt=""></a></div></div>
CSS样式表
/*头部样式开始*/.header {position: relative;width: 100%;height: 55px;/*一行文字垂直居中*/line-height: 55px;}.menu {position: absolute;top: 0;left: 0;width: 179px;height: 54px;background-color: #cf1132;font-size: 12px;color: #fff;}.sale {position: absolute;top: 0;right: 0;width: 138px;border-left: 1px solid #dadada;height: 54px;color: #333;font-size: 12px;/*修改光标为小手*/cursor: pointer;}.sale:hover {color: #bc2e2e;border-bottom: 1px solid #bc2e2e;background-color: #f3f3f3;}/*头部样式结束*//*banner样式开始*/.banner {position: relative;top: -10px;width: 100%;height: 784px;}.nav {z-index: 999;/*相对定位 相对于自己原位置不移动固定定位 相对于浏览器窗口的位置 0 0*//*有粘性定位的元素的父元素不能设置overflow:hidden|auto|scroll;*/position: sticky;top: 0;left: 0;width: 100%;height: 60px;background: url("../images/nav_back_bg_fd2505e.jpg") no-repeat center top;}.nav-wrap {position: relative;margin: 0 auto;width: 1180px;height: 70px;line-height: 70px;}.nav-wrap li {position: relative;float: left;width: 84.28px;font-size: 14px;}.nav-wrap li:not(.nav-active)::after {position: absolute;top: 30px;right: 0;content: "";width: 1px;height: 10px;background-color: #fff;}.nav-wrap li:hover::after {content: "";background-color: transparent;}.nav-wrap a {color: #fff;}.nav-active {background: url("../images/nav_bg1_d44f09d.jpg") no-repeat;}.nav-active > a {color: #000;}.nav-wrap li:hover {background: url("../images/nav_bg1_d44f09d.jpg") no-repeat;}/*鼠标悬停到li上 它的儿子a 字体颜色变为黑色*/.nav-wrap li:hover > a {color: #000;}/*放大镜*/.search {/*相对于nav-wrap定位*/position: absolute;top: 25px;right: -35px;width: 18px;height: 19px;background: url("../images/search_b180dd5.png") no-repeat;transition: all .3s;}.search:hover {transform: rotateY(180deg);}/*下拉列表*//*思路：①下拉列表绝对定位到显示的位置②display:none; 隐藏③鼠标悬停显示 display:block;*/.nav-list {position: absolute;top: 60px;left: 0;width: 100%;height: 0px;overflow: hidden;transition: all .3s;background: url("../images/subnav_bg_5cc9309.jpg") center 0 no-repeat;}.nav:hover > .nav-list {height: 140px;}.nav-list img {margin: 24px 10px 0;}
