纯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 ...
随机推荐
- mybatis sql参考
参考mybatis sql: <select id="xxx" resultType="com.xxxx.xxx.vo.xx.xx" parameterT ...
- springboot中配置文件application.properties的配置详情，数据源配置
pring Boot使用了一个全局的配置文件application.properties,放在src/main/resources目录下或者类路径的/config下.Sping Boot的全局配置文件 ...
- 云笔记项目-网页端debug功能学习
在做云笔记项目的过程中,除了服务端在eclipse中debug调试代码外,有时候需要在浏览器端也需要进行debug调试,刘老师举了一个冒泡排序算法的dubug例子,进行了讲解. 首先上浏览器端测试代码 ...
- cdnbest节点后台的3311如何登陆
如图操作点节点列表中节点管理修改节点3311的权限(因为初次安状节点权限是随机生成的,所以要修改),同时开启3311,然后就能在浏览器登陆节点后台了
- vi 操作
vi 3种模式:1命令行模式,2插入模式,3末行模式 Vim启动后直接进入的是命令行模式,命令行模式顾名思义就是可以输入各种命令的意思, 1. 命令行下按i键进入“插入模式”,命令行下按:键进入“末行 ...
- 动态创建js脚本和 css样式
//1.动态添加外部js文件 function loadScript(url){ var script = document.createElement("script"); sc ...
- IP路由配置之---------dhcp服务器配置
实验设备:一台华三路由器,一台PC 步骤一,在系统视图下打开dhcp功能,禁用IP(网关,域名服务器) [H3C]dhcp enable # [H3C]dhcp server forbidden-ip ...
- springboot整合devtool无法热部署
参见https://www.cnblogs.com/winner-0715/p/6666579.html.
- Entity Framework - PostgresQL CodeFirst
经过几年的更新及业界对Entity Framework 的认同. 现在 EF 可以支持的数据库越来越多了.而PostgresQL 数据库现在也可以使用code first的方式来创建数据库了. 不多说 ...
- JPanel JScrollPanel
JPanel 和 JScrollPanel 都属于面板,也是 Swing 中间容器,可以作为容器存放组件,但必须被添加到其他容器中. JPanel 可以聚集一些组件来布局, JScrollPanel ...