开发者社区> 文艺小青年> 正文

CSS-下拉导航条

2017-06-01 777

简介：
+关注继续查看

Web网站中很多时候都会出现下拉导航条，有的是通过CSS实现，有的通过JavaScript插件实现，其实CSS实现起来比较简单,先来看一个简版的下拉菜单:

Html代码通过ul列表实现:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<ul class="nav">
       <li>首页</li>
       <li>产品</li>
       <li>服务
           <ul>
               <li>设计</li>
               <li>研发</li>
               <li>交付</li>
           </ul>
       </li>
       <li>关于我们
           <ul>
               <li>博客园</li>
               <li>FlyElephant</li>
               <li>keso</li>
           </ul>
       </li>
   </ul>

CSS代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
.nav {
    margin-left: 200px;
    margin-top:200px;
}
 
.nav li {
    float: left;
    width: 150px;
    background-color: #00C5CD;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
    border-right: 1px solid #fff;
}
 
.nav li:last-child {
    border-right: none;
}
 
.nav li ul {
    width: 150px;
    position: absolute;
    margin-top: 10px;
    left: 9999px;
}
 
.nav li ul li {
    background-color: #00EE00;
    border-bottom: 1px solid #fff;
}
 
.nav li:hover ul {
    left: auto;
}

　里面很重要的一点就是在正常状态下将需要展示的ul位置只放在屏幕之外，left:9999px,鼠标滑动上的时候将left设置为auto~

本文转自Fly_Elephant博客园博客，原文链接：http://www.cnblogs.com/xiaofeixiang/p/5038552.html，如需转载请自行联系原作者


版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

前端开发 JavaScript
CSS导航条 CSS下拉
开发者社区 > 开发与运维 > 文章
云迁移中心
作者高分内容
更多
Android--数据持久化之SQLite 4050 Android--Sensor传感器 2529 setTimeout(0) 即将退役 1944 Linux进程间通信——管道 1908 循环神经网络(RNN)模型与前向反向传播算法 3019
相关文章
沃和莱特
html和css实现导航条
html和css实现导航条
12 0
天隆金
CSS3 3D下拉折叠菜单
在线演示 本地下载
746 0
技术小胖子
CSS固定DIV，导航条顶部固定fixed（兼容IE6）
827 0
吞吞吐吐的
[CSS]30种时尚的CSS网站导航条
1378 0
杰克.陈
纯CSS实现下拉菜单及下拉容器等（纯CSS实现导航条及导航下拉容器）
原文:纯CSS实现下拉菜单及下拉容器等（纯CSS实现导航条及导航下拉容器）  虽然网上类似甚至相同的案例有很多，但是我还是写下，以记下笔记，也可供大家参考 希望大家可以指导批评~~ 首先我们以列表ul li 来开始我们菜单也可以说导航条的制作： 在页面中我们首先构建以下XHTML结构： ...
1045 0
河北易威
网站介绍web前端 html+css+javascript网页设计
网站介绍web前端 html+css+javascript网页设计
19 0
haihonghong
「HTML+CSS」--自定义加载动画【028】
「HTML+CSS」--自定义加载动画【028】
43 0
haihonghong
「HTML+CSS」--自定义加载动画【027】
「HTML+CSS」--自定义加载动画【027】
28 0
haihonghong
「HTML+CSS」--自定义加载动画【019】
「HTML+CSS」--自定义加载动画【019】
18 0
haihonghong
「HTML+CSS」--自定义加载动画【014】【疑问未解决】
「HTML+CSS」--自定义加载动画【014】【疑问未解决】
21 0
+关注
文艺小青年
文章
问答
作者高分内容
更多
Android--数据持久化之SQLite 4050 Android--Sensor传感器 2529 setTimeout(0) 即将退役 1944 Linux进程间通信——管道 1908 循环神经网络(RNN)模型与前向反向传播算法 3019
文章排行榜
最热
最新
1 fastjson2为什么这么快 74541
2 Meetup 报名丨 共话云原生架构升级，微服务x容器开源 Meetup 北京站来啦！ 64504
3 CVPR2021 | 视觉推理解释框架VRX：用结构化视觉概念作为解释网络推理逻辑的「语言」 63486
4 结构化总结与结构化思考之《金字塔原理》总结 56289
5 实现人机协同高稳定性，阿里云5G专网IoT方案入选工信部优秀解决方案 54099
6 C语言题解 | 移除元素(多种解法) 49963
7 jasypt-spring-boot敏感信息加密解密利器使用指南 47644
8 快速开发光伏电站数字孪生运维系统（一） 44656
9 DataWorks管控台无法配置PAI引擎临时解决方案 42514
10 Hive数据倾斜的原因以及常用解决方案 33179
11 高并发编程之阻塞队列 32723
12 Spring 事务【隔离级别与传播机制】 30484
13 性能优化之使用vue-worker插件（基于Web Worker）开启多线程运算提高效率 29490
14 计网之初识网络(理解网络传输的基本流程) 28008
15 Android体系课之--LeakCanary内存泄露检测原理解析 25929
16 零基础快速开发Vue图书管理系统—登录注册篇（一） 22676
17 IoT设备数据的存储、解析和价值挖掘实践 22645
18 IoT Studio 物联网可视化应用搭建开发实践 21295
19 开源大数据可观测性方案实践 - 助力集群运维智能化、便捷化 16351
20 快速开发光伏电站数字孪生运维系统（二） 14900
1 Flink CDC 专题首发｜每天 10 分钟，解锁新一代数据集成框架 148
2 ChatGPT4 给出数据库开发者最容易犯的 10 个错误和解决方案 59
3 性能最大提升60%，阿里云第八代企业级实例ECS g8i正式上线 148
4 [版本更新]PolarDB-X v2.2.1 生产级关键能力开源升级 54
5 身份证实名认证接口验证不一致的原因 113
6 JVM学习.03 类加载机制 102
7 org.springframework.http.converter.HttpMessageNotReadableException: JSON parse error: Cannot deserialize instance of `object` out of START_ARRAY token 178
8 Content type 'application/x-www-form-urlencoded;charset=UTF-8' not supported 215
9 云原生学习（二） 59
10 官宣｜Apache Flink 1.17 发布公告 376
11 Java智慧校园电子班牌系统源码 基于Java+springboot+vue+element-ui+mysql开发 63
12 基于阿里云eRDMA的GPU实例大幅提升多机训练性能 272
13 基于阿里云弹性GPU服务的神龙AI加速引擎无缝提升AI训练性能 215
14 重构计算，驱动视界：阿里云视觉计算思考与实践 199
15 如何构建可持续的ChatGPT高性能服务器端架构? 61
16 当一座钢铁森林 变成IoT智能化数据 58
17 阿里巴巴发布《城市数字孪生能力平台总体技术要求》企业标准， 促进数字孪生互联互通生态建设 361
18 docker的安装与镜像 63
19 初识Kafka 72
20 基础篇丨链路追踪（Tracing）其实很简单 170
相关课程
更多
前端开发CSS基础
4157
21
去学习
零基础学前端HTML+CSS
8756
57
去学习
CSS 快速掌握
19082
49
去学习
推荐文章
参与OCR文档自学习产品评测，赢Airpods 2 参与云效代码管理Codeup评测，赢Redmi Watch 3 参与IoT小程序框架评测，赢CHERRY机械键盘 乘风者计划邀您入驻社区，精彩权益即刻享
相关电子书
更多
零基础CSS入门教程
立即下载
低代码开发师（初级）实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载