纯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 ...
随机推荐
- 使用jQuery+huandlebars循环中索引(@index)使用技巧(访问父级索引)
兼容ie8(很实用,复制过来,仅供技术参考,更详细内容请看源地址:http://www.cnblogs.com/iyangyuan/archive/2013/12/12/3471227.html) & ...
- java应用健康检查
本文主要针对自己手写shell监控应用状态,有可系统解决方案的,比如K8S,可以略过 #!/bin/sh#health_check.sh count=`ps -ef | grep test.jar | ...
- python学习Day4 流程控制(if分支，while循环，for循环)
复习 1.变量名命名规范 -- 1.只能由数字.字母 及 _ 组成 -- 2.不能以数字开头 -- 3.不能与系统关键字重名 -- 4._开头有特殊含义 -- 5.__开头__结尾的变量,魔法变量 - ...
- 如何用poi生成导出excel
import org.apache.poi.ss.usermodel.CellStyle; import org.apache.poi.ss.usermodel.Sheet; import java. ...
- Python中的线程详解
线程 常用的方法 import threading import time def hello(name): print('Hello %s' % name) # 阻塞 time.sleep(5) p ...
- Appium 学习一：环境搭建问题
1.安装Android-sdk http://tools.android-studio.org/index.php/sdk 问题1:下载 android-sdk_r24.4.1-windows.zip ...
- 初学c# -- c#创建开机自启服调用外部交互式exe文件
在c#创建的开机自启动服务里,调用外部可执行文件有以下问题:1.带窗口的交互式的exe文件调用后,实际并没有被执行:2.服务是随windows启动的,服务启动后可能windows桌面还没出来,会报错误 ...
- uvm_pre_do
https://blog.csdn.net/tingtang13/article/details/46535649 1.uvm_do 封装了一系列接口,封装越多,灵活性越差.所以增加了三个接口:pre ...
- [leetcode]54. Spiral Matrix螺旋矩阵
Given a matrix of m x n elements (m rows, n columns), return all elements of the matrix in spiral or ...
- 集群环境下定时调度的解决方案之Quartz集群
集群环境可能出现的问题 在上一篇博客我们介绍了如何在自己的项目中从无到有的添加了Quartz定时调度引擎,其实就是一个Quartz 和Spring的整合过程,很容易实现,但是我们现在企业中项目通常都是 ...