首页 > 网页制作 > HTML/Xhtml

HTML+CSS实现导航条下拉菜单的示例代码 游戏攻略

admin HTML/Xhtml 2022-02-04 21:43:11 HTML   CSS   导航条   下拉菜单"

效果

代码中的图片可以自己换的

在这里插入图片描述

下拉菜单HTML代码

下拉菜单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;
}

到此这篇关于HTML+CSS实现导航条下拉菜单的示例代码的文章就介绍到这了,更多相关HTML+CSS导航条下拉菜单内容请搜索潘少俊衡以前的文章或继续浏览下面的相关文章,希望大家以后多多支持潘少俊衡!

版权声明

本文仅代表作者观点,不代表本站立场。
本文系作者授权发表,未经许可,不得转载。
本文地址:/web/HTML/70233.html

留言与评论(共有 0 条评论)
   
验证码:

潘少俊衡

| 桂ICP备2023010378号-4

Powered By EmpireCMS

爱享小站

中德益农

谷姐神农

环亚肥料

使用手机软件扫描微信二维码

关注我们可获取更多热点资讯

感谢潘少俊衡友情技术支持