WEB笔记-CSS 实现多级导航效果
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*初始化全局*/
*{margin:0; padding:0;}
body{background:#737373;}
/*设置导航nav居中*/
nav{background:#fff;text-align:center;}
/*nav属性inliblock 保证居中*/
nav ul{display:inline-block;}
/*设置相对定位,保证子菜单位置*/
nav li{float:left;list-style:none;position:relative;border-bottom:3px #fff solid;}
/*悬停效果*/
nav li:hover{border-bottom:3px #006B8C solid;}
/*设置连接样式,行内->块级*/
nav a{display:block;padding:6px 20px;text-decoration: none;color:#676767;}
nav a:hover{background:#73C39F;color:#fff;}
nav a:active{background:#fff;color:#73C39F;}
/*子菜单清浮动*/
nav li li{float: none;}
/*隐藏子菜单 设置位置*/
nav li ul{display:none;background:#fff;position:absolute;min-width:200px;left:0;top:110%;}
/*三级以后菜单处理*/
nav li li ul{position:absolute;left:100%;top:0;}
/*悬停显示子菜单*/
nav li:hover > ul{display:block;}
</style>
</head>
<body>
<div id="container">
<nav>
<ul>
<li><a href="#">一级菜单001</a></li>
<li><a href="#">一级菜单002</a></li>
<li><a href="#">一级菜单003</a></li>
<li><a href="#">一级菜单004</a>
<ul>
<li><a href="#">二级菜单004001</a></li>
<li><a href="#">二级菜单004002</a>
<ul>
<li><a href="#">三级菜单</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">一级菜单005</a></li>
</ul>
</nav>
</div>
</body>
</html>
显示效果:
WEB笔记-CSS 实现多级导航效果的更多相关文章
- css之纯css实现流程导航效果
:::tip 使用纯css线上 流程导航效果. 本文统一采取 flex 布局 ,你也可以采用其他布局实现,核心原理不变 ::: ## 方法一 利用裁剪 该方法IE下不支持 利用裁剪 clip ...
- 【css】3d导航效果
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 【温故而知新-CSS】使用CSS设计网站导航栏
body #nav li a { width: auto; } #nav li a:hover { background-color: #ffcc00; color: #fff; border-rig ...
- amazeui学习笔记--css(常用组件9)--导航nav
amazeui学习笔记--css(常用组件9)--导航nav 一.总结 1.导航基本使用:<ul> 添加 .am-nav class 以后就是一个基本的垂直导航.默认样式中并没有限定导航的 ...
- CSS实现商城分类导航效果(hover选择器)
学完制作出这个导航效果之后,收获最多的是了解了hover选择器的功能,:hover 选择器用于选择鼠标指针浮动在上面的元素.在鼠标移到元素上时向此元素添加特殊的样式(CSS).例如:改变鼠标悬停处的元 ...
- amazeui学习笔记--css(常用组件10)--导航条Topbar
amazeui学习笔记--css(常用组件10)--导航条Topbar 一.总结 1. 导航条:就是页面最顶端的导航条:在容器上添加 .am-topbar class,然后按照示例组织所需内容.< ...
- amazeui学习笔记--css(常用组件2)--面包屑导航Breadcrumb
amazeui学习笔记--css(常用组件2)--面包屑导航Breadcrumb 一.总结 1.am-breadcrumb:用am-breadcrumb来声明面包屑导航控件,.am-breadcrum ...
- amazeui学习笔记--css(基本样式3)--文字排版Typography
amazeui学习笔记--css(基本样式3)--文字排版Typography 一.总结 1.字体:amaze默认非 衬线字体(sans-serif) 2.引用块blockquote和定义列表:引用块 ...
- 学习使用 CSS3 制作网站面包屑导航效果
作为最重要的导航展示形式之一,面包屑导航能够让用户更清楚的知道他们所在页面的层次结构,让他们可以方便的导航到上一层页面.在本教程中,您将学习如何使用 CSS3 技术创建自己的面包屑导航效果. 效果演示 ...
随机推荐
- Django——9 博客小案例的实现
Django 博客小案例的实现 主要实现博客的增删改查功能 主页index.html --> 展示添加博客和博客列表的文字,实现页面跳转 添加页add.html --> 输入文章标 ...
- 暑假集训D15总结
考试 日常爆炸= = T1数据背锅,回天乏力 推了两个小时的T2竟然莫名RE,我也是服了 T3考试时就没读懂题,做个鬼啊 今天一直在写某奇怪的技术贴,竟然没有写题解(手动滑稽) 希望明天不要乱炸吧 博 ...
- Spring Boot访问mysql(JPA方式)最简单配置
0.先推荐一个工具--lombok,pom文件如下: <dependency> <groupId>org.projectlombok</groupId> <a ...
- nyoj_17_单调递增最长子序列_201403121516
单调递增最长子序列 时间限制:3000 ms | 内存限制:65535 KB 难度:4 描述 求一个字符串的最长递增子序列的长度如:dabdbf最长递增子序列就是abdf,长度为4 输入 ...
- 基于zookeeper和强一致性复制实现MySQL分布式数据库集群
http://qikan.cqvip.com/article/detail.aspx?id=667750898&from=zk_search
- ELECTRON开发环境配置方法
1.下载并安装Node.js 下载地址:https://nodejs.org/en/download/current/ 安装之后进行验证 2.下载并这装electron 安装命令:npm instal ...
- [Debug] Use Remote Sources to Debug a Web App on an Emulator, Simulator, or Physical Device
We can emulate different operating systems, browsers, and devices within a desktop operating system. ...
- 深入理解android view 生命周期
作为自定义 view 的基础,如果不了解Android view 的生命周期 , 那么你将会在后期的维护中发现这样那样的问题 ....... 做过一段时间android 开发的同学都知道,一般 on ...
- poj 2763(在线LCA+树状数组)
Housewife Wind After their royal wedding, Jiajia and Wind hid away in XX Village, to enjoy their ord ...
- UESTC--1251--谕神的密码(贪心)
谕神的密码 Time Limit: 1000MS Memory Limit: 65535KB 64bit IO Format: %lld & %llu Submit Status ...