纯CSS下拉菜单（希望对有需要的小伙伴有所帮助）
效果截图（颜色有点丑，请无视）：
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<title></title>
<style>
* {
margin: 0;
padding: 0;
outline: 0;
} ul,
li {
list-style: none;
} a {
text-decoration: none;
} .nav {
content: '';
display: table;
clear: both;
box-sizing: border-box;
padding: 50px;
} .nav li.list-li {
position: relative;
float: left;
width: 120px;
height: 40px;
line-height: 40px;
font-weight: bold;
border: 1px solid #486b02;
border-right: 0;
background-color: #27AE60;
text-align: center;
box-sizing: border-box;
} .nav>li.list-li:last-child {
border-right: 1px solid #486B02;
} .nav li.list-li ul {
display: none;
position: absolute;
top: 39px;
left: -1px;
width: 120px;
border: 1px solid #8BD400;
border-top: 0px;
border-right: 0;
cursor: pointer;
box-sizing: border-box;
} .nav li.list-li ul.ul-last {
border-right: 1px solid #8BD400;
} .nav .list-li:hover ul {
display: block;
background-color: aquamarine;
color: #fff;
} .nav .list-li a {
display: block;
} .nav li a:hover {
color: #fff;
background-color: blue;
} </style>
</head> <body>
<ul class="nav">
<li class="list-li">
<a href="javascript:;">home</a>
<ul>
<li>
<a>desgin1</a>
</li>
<li>
<a>desgin</a>
</li>
<li>
<a>desgin</a>
</li>
</ul>
</li>
<li class="list-li">
<a href="javascript:;">home</a>
<ul>
<li>
<a>desgin2</a>
</li>
<li>
<a>desgin</a>
</li>
<li>
<a>desgin</a>
</li>
</ul>
</li>
<li class="list-li">
<a href="javascript:;">home</a>
<ul>
<li>
<a>desgin3</a>
</li>
<li>
<a>desgin</a>
</li>
<li>
<a>desgin</a>
</li>
</ul>
</li>
<li class="list-li">
<a href="javascript:;">home</a>
<ul class="ul-last">
<li>
<a>desgin4</a>
</li>
<li>
<a>desgin</a>
</li>
<li>
<a>desgin</a>
</li>
</ul>
</li>
</ul>
</body> </html>
纯CSS下拉菜单（希望对有需要的小伙伴有所帮助）的更多相关文章
- 支持多种浏览器的纯css下拉菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- CSS+JS下拉菜单和纯CSS下拉菜单
下拉菜单 (思路:先把二级定位到屏幕外,鼠标悬停重新定位回来:另一个就是ul浮动,li也浮动) 下拉菜单的一般思路就是把子导航嵌套在无序列表中,把列表定位到屏幕之外,当鼠标悬停在其父列表项上时,重新定 ...
- 纯css下拉菜单的制作
通过观察下拉菜单的过程,发现有两种状态,一种是鼠标没有hover时,一种是鼠标hover时. 主菜单hover时,显示子菜单:主菜单没有hover时,不显示子菜单 <!DOCTYPE html& ...
- 超简洁的CSS下拉菜单
效果体验:http://hovertree.com/texiao/css/3.htm HTML文件代码: <!DOCTYPE html> <html xmlns="http ...
- 华丽导航CSS下拉菜单特效
华丽导航CSS下拉菜单特效,华丽导航,导航特效,CSS,下拉菜单,华丽特效. 代码地址:http://www.huiyi8.com/sc/26811.html 风景图片网:http://www.hui ...
- CSS：CSS 下拉菜单
ylbtech-CSS:CSS 下拉菜单 1.返回顶部 1. CSS 下拉菜单 使用 CSS 创建一个鼠标移动上去后显示下拉菜单的效果. 下拉菜单实例 实例演示 1 实例演示 2 基本下拉菜单 当鼠标 ...
- 纯CSS下拉导航菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="h ...
- 使用checkbox实现纯CSS下拉框
在这个例子中,我们会看到一个纯CSS制作的下拉框.主要是要用到了HTML元素的checkbox 和CSS3选择器,并没有用到JavaScript.例子如下: Click to Expand Link ...
- 简易的CSS下拉菜单 - 1
<!DOCTYPE html> <html> <head> <style> body{ margin:0; } .dropmenu{ backgroun ...
随机推荐
- java 泛型详解-绝对是对泛型方法讲解最详细的，没有之一
对java的泛型特性的了解仅限于表面的浅浅一层,直到在学习设计模式时发现有不了解的用法,才想起详细的记录一下. 本文参考java 泛型详解.Java中的泛型方法. java泛型详解 1. 概述 泛型在 ...
- 关于 web 页面 占满全屏
页面一般可以分成三部分,头部,底部,中间内容部分. 一般不用考虑中间高度部分,因为可以靠内容撑开,然后让底部到达底部.但是当中间内容太少时,底部就会顶不到底部. 方法1.中间部分给一个最小高度(min ...
- Spark SQL例子
综合案例分析 现有数据集 department.json与employee.json,以部门名称和员工性别为粒度,试计算每个部门分性别平均年龄与平均薪资. department.json如下: {&q ...
- 在ASP.NET中使用KindEditor富文本编辑器
以前一直用百度的UEditor.这次客户提了一个需求要在编辑器中插入Flash动画,但是不知道怎么用UEditor实现,于是选用了KindEditor. 更重要的一点是,客户的网站使用Framewor ...
- 如何用poi生成导出excel
import org.apache.poi.ss.usermodel.CellStyle; import org.apache.poi.ss.usermodel.Sheet; import java. ...
- H5学习的例子
https://github.com/NalvyBoo/HTML5 https://github.com/yujinjin/fans github看到这里 https://github.com ...
- vue.js核心最基本的功能
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统: , text: , text: , text: '随便其它什么人吃的东西' } ] }}) 蔬菜 奶酪 随便其 ...
- swift 警告框 - 自定义按钮颜色，图片
1.封装 弹框http://www.hangge.com/blog/cache/detail_651.html import UIKit extension UIAlertController { / ...
- Linux命令列内容
命令列内容: 一般模式 移动光标 [ctrl]+[f] 屏幕[向前]移动一页 [ctrl]+[b] 屏幕[向后]移动一页 0 这是数字0:移动到这一行的最前面字符处 $ 移动到这一行的最后面字符处 G ...
- 教你用PS快速抠出长发
抠简单的长发背景时可以利用快速选择工具,十分方便就能抠出来. 这类背景的图片只需要一个工具就行了,没错,只用快速选择工具. 拖到ps,然后选择快速选择工具. 用工具选中大部分的人 选择.选择并遮住 选 ...