运用HTML+CSS怎么写导航的下拉菜单

发布时间：2023-10-11 14:57:05 所属栏目：语言来源：

导读：在这篇文章中，我们来学习一下“用HTML+CSS怎么写导航的下拉菜单，代码是什么”的相关知识，下文有详细的讲解，易于大家学习和理解，有需要的朋友可以借鉴参考，下面就请大家跟着小编的思路一起来学习一下

在这篇文章中，我们来学习一下“用HTML+CSS怎么写导航的下拉菜单，代码是什么”的相关知识，下文有详细的讲解，易于大家学习和理解，有需要的朋友可以借鉴参考，下面就请大家跟着小编的思路一起来学习一下吧。

下拉菜单HTML代码

<header class="header">

        <div class="header_left">

            <img src="img/logo.jpg">

        </div>

        <div class="header_right">

                <div class="number_right">

                    <img src="img/number.jpg">

                </div>

                <ul>

                    <a href="#"><li>首页</li></a>

                    <a href="#"><li class="show_list">

                        <span>成功案例</span>

                        <ul class="move_list">

                            <li>品牌设计</li>

                            <li>网页设计</li>

                            <li>平面设计</li>

                            <li>电子商城</li>

                            <li>空间/建筑</li>

                        </ul>

                    </li></a>

                    <a href="#"><li>我要设计</li></a>

                    <a href="#"><li>在线咨询</li></a>

                    <a href="#"><li>会员注册</li></a>

                    <a href="#"><li>会员登录</li></a>

                </ul>

        </div>

    </header>

下拉菜单CSS代码

.header{

    height: 120px;

    width: 1046px;

    margin: 0 auto;

}

.header_left{

    float: left;

    line-height: 120px;

}

.header_left img{

    width: 300px;

    height: 100px;

}

.header_right{

    float: right;

    height: 120px;

    position: relative;

}

.header_right>div{

    position: absolute;

    top: 0;

    right: 0;

}

.header_right ul{

    margin-top: 88px;

}

.header_right ul a li{

    border-right: 1px solid #000000;

    height: 13px;

    font-size: 15px;

    padding: 0 25px;

    font-weight: bold;

    color: #666;

}

.header_right ul a{

    float: left;

    line-height: 13px;

}

.header_right ul a li:hover{

    color: #000000;

}

.header_right ul a:last-child li{/*去掉最后的边框*/

    border: none;

}

.show_list{

    position: relative;

}

.show_list .move_list{

    display: none;

    z-index: 103;

    position: absolute;

    top: -56px;

    left: 0;

    width: 100%;

    background: #333;

    text-align: center;

}

.show_list .move_list li{

    padding: 10px 0;

    width: 114px;

    color: #fff;

}

.header_right ul a .show_list{

    padding-bottom: 20px;

    border-right: none;

}

.show_list:hover .move_list{

    display: block;

}

.header_right ul a:nth-child(3){

    border-left: 1px solid #000;

}

.show_list .move_list li:hover{

    color: white;

    background: orange;

}

在写完上述代码的同时须加上css的重置代码，代码如下：

* {

    margin: 0;

    padding: 0

}

em,i {

    font-style: normal

}

li {

    list-style: none

}

a{

    font: 14px/24px Microsoft YaHei,Arial,\\5B8B\4F53,Arial Narrow;

    letter-spacing: 1.2px;

    color: #666;

    text-decoration: none

}

a:hover {

    color: #c81623 ;

}

img {

    border: 0;

    vertical-align: middle

}

input{

    outline: none;

}

button {

    cursor: pointer;

    border:none;

    outline: none;

}

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!