阴阳师官网导航栏 html+css

阴阳师官网导航栏

通过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;
}