经典的 div + css 鼠标 hover 下拉菜单

效果图：

源码：


<html><head>
<meta charset="utf-8"><style type="text/css">nav {margin:100px auto;text-align:center;}nav ul {border-radius:10px;background:linear-gradient(to bottom,#efefef,#bbbbbb);padding:0 20px;display:inline-table;position:relative;box-shadow:1px 1px 3px #666;list-style:none;}nav ul ul {display:none;list-style:none;}nav ul li {float:left;list-style:none;}nav ul::after {content:"";display:block;clear:both;list-style:none;}nav ul li a {display:block;padding:25px 40px;color:#000;text-decoration:none;font-family:"微软雅黑";}nav ul li:hover > ul {display:block;list-style:none;}nav ul li:hover {background:linear-gradient(to bottom,#4f5964,#5f6975);list-style:none;}nav ul li:hover a {color:#FFF;}nav ul ul {background:#5f6975;border-radius:0;position:absolute;top:100%;padding:0;list-style:none;}nav ul ul li {float:none;border-top:1px solid #6b727c;border-bottom:1px solid #575f6a;list-style:none;}nav ul ul li a {color:#FFF;}nav ul ul li a:hover {background:#4b545f;}nav ul ul ul {width:100%;position:absolute;left:100%;top:50%;list-style:none;}</style></head><body>
<nav><ul><li><a href="#">导航一</a><ul><li><a href="#">二级导航</a></li><li><a href="#">二级导航</a></li><li><a href="#">二级导航</a></li><li><a href="#">二级导航</a></li></ul></li><li><a href="#">导航二</a></li><li><a href="#">导航三</a><ul><li><a href="#">二级导航</a></li><li><a href="#">二级导航</a></li><li><a href="#">二级导航</a><ul><li><a href="#">三级导航</a></li><li><a href="#">三级导航</a></li><li><a href="#">三级导航</a></li></ul></li><li><a href="#">二级导航</a></li></ul></li><li><a href="#">导航四</a><ul><li><a href="#">二级导航</a></li><li><a href="#">二级导航</a></li><li><a href="#">二级导航</a></li></ul></li><li><a href="#">导航五</a><ul><li><a href="#">二级导航</a></li><li><a href="#">二级导航</a></li></ul></li><li><a href="#">导航六</a></li></ul>
</nav></body>
</html>

转载于:https://www.cnblogs.com/xpwi/p/9905213.html

经典的 div + css 鼠标 hover 下拉菜单相关推荐

html hover效果下拉个框,CSS实现Hover下拉菜单的方法
老规矩,今天来讲一个很实用的css效果,当鼠标移到按钮的时候就会自动显示下拉菜单.效果如下: 很简单的一个小demo,实现步骤如下: 首先定义一个大的div包裹一个button和一个a链接组分别设置d ...
利用CSS实现悬停下拉菜单
利用CSS实现悬停下拉菜单 1.效果鼠标移到[搜索引擎],自动弹出其下拉菜单,在下拉菜单里移动,光条随之移动. 2.代码 <!DOCTYPE html> <html lang=&q ...
Bootstrap导航条鼠标悬停下拉菜单
Bootstrap导航条鼠标悬停下拉菜单 Bootstrap的导航条下拉菜单为了适应移动设备没有鼠标hover的状态,都是点击弹出下拉菜单,为了适应一般网站使用,我稍作了一些修改,鼠标hover时就弹 ...
鼠标移入下拉菜单相关问题？
一.这是需要实现的效果功能描述: 鼠标移入导航,下方显示对应的菜单: 鼠标移出导航,隐藏下方对应的菜单: 当下方菜单显示后,鼠标移入没有变化: 当鼠标移出下方的菜单,菜单进行隐藏: 如图所示: 二. ...
css实现列表下拉菜单_逐行：点击打开下拉列表和菜单的高级CSS技巧
css实现列表下拉菜单 by David Piepgrass 由David Piepgrass 逐行:点击打开下拉列表和菜单的高级CSS技巧 (Line-by-line: advanced CSS t ...
html 下拉框设置名称,html下拉菜单怎么做？高手教你如何在HTML和CSS中创建下拉菜单...
html下拉菜单怎么做?html下拉菜单代码是什么?这些对于刚刚入门的新手,还不是很明白,下面高手教你如何在HTML和CSS中创建下拉菜单? 很多人都会遇到将鼠标悬停在导航上,会出现下拉菜单; 一般出 ...
css3如何写下拉菜单,css如何实现下拉菜单超详细
首页 >web前端>css教程>正文 css如何实现下拉菜单?css实现下拉菜单的方法(完整代码) 原创2019-04- 本篇文章给大家带来的内容是关于css如何实现下拉菜单?css ...
css表格中下拉菜单怎么设置,css如何实现下拉菜单？css实现下拉菜单的方法（完整代码）...
本篇文章给大家带来的内容是关于css如何实现下拉菜单?css实现下拉菜单的方法(完整代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. /*盒子,相对定位*/ .dropdown{ ...
js+css+html制作下拉菜单
js+css+html制作下拉菜单 1 案例需求 2 编写HTML结构代码 3 编写css样式 4 编写JavaScript部分 5 全部代码 1 案例需求使用JavaScript+css+html ...

经典的 div + css 鼠标 hover 下拉菜单

经典的 div + css 鼠标 hover 下拉菜单

经典的 div + css 鼠标 hover 下拉菜单相关推荐

最新文章

热门文章