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 相关文章推荐
一款纯css3实现的鼠标悬停动画按钮
Dec 29 HTML / CSS
实例讲解CSS3中Transform的perspective属性的用法
Apr 22 HTML / CSS
CSS3制作圆角图片和椭圆形图片
Jul 08 HTML / CSS
CSS3利用text-shadow属性实现多种效果的文字样式展现方法
Aug 25 HTML / CSS
CSS3打造磨砂玻璃背景效果
Sep 28 HTML / CSS
HTML5中实现拖放效果无须借助javascript
Dec 26 HTML / CSS
HTML5 canvas画图并保存成图片的jcanvas插件
Jan 17 HTML / CSS
HTML5标签嵌套规则详解【必看】
Apr 26 HTML / CSS
HTML5新标签兼容——&gt; 的两种方法
Sep 12 HTML / CSS
HTML+CSS+JavaScript实现图片3D展览的示例代码
Oct 12 HTML / CSS
在HTML中引入CSS的几种方式介绍
Dec 06 HTML / CSS
HTML5之高度塌陷问题的解决
Jun 01 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
ob_start(),ob_start('ob_gzhandler')使用
2006/12/25 PHP
ajax取消挂起请求的处理方法
2013/03/18 PHP
Thinkphp搜索时首页分页和搜索页保持条件分页的方法
2014/12/05 PHP
YII中Ueditor富文本编辑器文件和图片上传的配置图文教程
2017/03/15 PHP
swoole和websocket简单聊天室开发
2017/11/18 PHP
Smarty模板类内部原理实例分析
2019/07/03 PHP
Thinkphp集成抖音SDK的实现方法
2020/04/28 PHP
通过event对象的fromElement属性解决热区设置主实体的一个bug
2008/12/22 Javascript
JavaScript基础语法、dom操作树及document对象
2014/12/02 Javascript
JavaScript让Textarea支持tab按键的方法
2015/06/26 Javascript
简单实现js选项卡切换效果
2016/02/03 Javascript
基于jQuery的网页影音播放器jPlayer的基本使用教程
2016/03/08 Javascript
jQuery滚动监听实现商城楼梯式导航效果
2017/03/06 Javascript
javascript 正则表达式分组、断言详解
2017/04/20 Javascript
简述jQuery Easyui一些用法
2017/08/01 jQuery
利用原生的JavaScript实现简单拼图游戏
2018/11/18 Javascript
js实现图片无缝循环轮播
2019/10/28 Javascript
vue中使用vue-pdf的方法详解
2020/09/05 Javascript
移动端JS实现拖拽两种方法解析
2020/10/12 Javascript
pyqt4教程之实现windows窗口小示例分享
2014/03/07 Python
使用Python来开发Markdown脚本扩展的实例分享
2016/03/04 Python
Django模板变量如何传递给外部js调用的方法小结
2017/07/24 Python
Python3多目标赋值及共享引用注意事项
2019/05/27 Python
Python partial函数原理及用法解析
2019/12/11 Python
python统计mysql数据量变化并调用接口告警的示例代码
2020/09/21 Python
利用Python实现字幕挂载(把字幕文件与视频合并)思路详解
2020/10/21 Python
python中xlrd模块的使用详解
2021/02/01 Python
美国克罗格超市在线购物:Kroger
2019/06/21 全球购物
《东方明珠》教学反思
2014/04/20 职场文书
四风查摆剖析材料
2014/10/10 职场文书
个人典型事迹材料
2014/12/30 职场文书
2015年民主评议党员工作总结
2015/05/19 职场文书
辣妈辣妹观后感
2015/06/10 职场文书
2016党员学习心得体会范文
2016/01/23 职场文书
三十年再续同学情倡议书
2019/11/27 职场文书
如何开发一个渐进式Web应用程序PWA
2021/05/10 Javascript