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


Posted in HTML / CSS onAugust 02, 2021

效果

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

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

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

 
HTML / CSS 相关文章推荐
IE滤镜与CSS3效果(详细整理分享)
Jan 25 HTML / CSS
CSS3 2D模拟实现摩天轮旋转效果
Nov 16 HTML / CSS
用CSS3实现无限循环的无缝滚动的实例代码
Jul 04 HTML / CSS
CSS3 实现弹幕的示例代码
Aug 07 HTML / CSS
CSS 3.0 结合video视频实现的创意开幕效果
Jun 01 HTML / CSS
HTML5对手机页面长按会粘贴复制禁用的解决方法
Jul 19 HTML / CSS
详解HTML5新增标签
Nov 27 HTML / CSS
将HTML5 Canvas的内容保存为图片借助toDataURL实现
May 20 HTML / CSS
HTML5标签与HTML4标签的区别示例介绍
Jul 18 HTML / CSS
Html5 Geolocation获取地理位置信息实例
Dec 09 HTML / CSS
HTML实现代码雨源码及效果示例
Feb 25 HTML / CSS
CSS3 制作精美的定价表
Apr 06 HTML / CSS
CSS实现两列布局的N种方法
Aug 02 #HTML / CSS
html+css实现滚动到元素位置显示加载动画效果
Aug 02 #HTML / CSS
纯html+css实现打字效果
html form表单基础入门案例讲解
Jul 21 #HTML / CSS
带你了解CSS基础知识,样式
Jul 21 #HTML / CSS
CSS实现隐藏搜索框功能(动画正反向序列)
Jul 21 #HTML / CSS
详解CSS3.0(Cascading Style Sheet) 层叠级联样式表
You might like
php实现批量修改文件名称的方法
2016/07/23 PHP
PHP给前端返回一个JSON对象的实例讲解
2018/05/31 PHP
动态改变textbox的宽高的js
2006/10/26 Javascript
javascript 框架小结 个人工作经验
2009/06/13 Javascript
firefox下jQuery UI Autocomplete 1.8.*中文输入修正方法
2012/09/19 Javascript
jquery入门—选择器实现隔行变色实例代码
2013/01/04 Javascript
Js 代码中,ajax请求地址后加随机数防止浏览器缓存的原因
2013/05/07 Javascript
javascript图片相似度算法实现 js实现直方图和向量算法
2014/01/14 Javascript
javascript实现的一个带下拉框功能的文本框
2014/05/08 Javascript
jquery-syntax动态语法着色示例代码
2014/05/14 Javascript
微信小程序 LOL 英雄介绍开发实例
2016/09/30 Javascript
vue2实现数据请求显示loading图
2017/11/28 Javascript
浅谈vue的props,data,computed变化对组件更新的影响
2018/01/16 Javascript
jQuery滑动效果实现方法分析
2018/09/05 jQuery
Vue实现商品详情页的评价列表功能
2019/09/04 Javascript
Python实现两个list求交集,并集,差集的方法示例
2018/08/02 Python
Python3实现的简单三级菜单功能示例
2019/03/12 Python
Pytorch提取模型特征向量保存至csv的例子
2020/01/03 Python
Python namedtuple命名元组实现过程解析
2020/01/08 Python
Python更新所有已安装包的操作
2020/02/13 Python
Python连接SQLite数据库并进行增册改查操作方法详解
2020/02/18 Python
Bootstrap 学习分享
2012/11/12 HTML / CSS
乐高积木玩具美国官网:LEGO Shop US
2016/09/16 全球购物
Unineed旗下时尚轻奢网站:FABHunt
2019/05/13 全球购物
Nanushka官网:匈牙利服装品牌
2019/08/14 全球购物
ECHT官方网站:男女健身服
2020/02/14 全球购物
夜大毕业自我鉴定
2013/10/11 职场文书
入团者的自我评价分享
2013/12/02 职场文书
反腐倡廉演讲稿
2014/05/22 职场文书
心得体会的写法
2014/09/05 职场文书
物业保安辞职信
2015/05/12 职场文书
学生安全责任协议书
2016/03/22 职场文书
入党转正申请自我鉴定
2019/06/25 职场文书
导游词之阆中古城
2019/12/23 职场文书
Python道路车道线检测的实现
2021/06/27 Python
MySQL数据库优化之通过索引解决SQL性能问题
2022/04/10 MySQL