经典的 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>

经典的 div + css 鼠标 hover 下拉菜单的更多相关文章

关于css中hover下拉框的一个bug
写hover下拉框的时候会遇到一个奇怪的bug,就是下拉框下来的时候会被所在位置的div遮挡,哪怕下拉框使用的absolute,也会被遮挡. 如图: 这个语言选择的下拉框会被下面的div挡住(截图是已 ...
CSS 实现样式下拉菜单
下拉菜单的实现脚本: <script type="text/javascript"> function ShowSub(li) { ]; ; subMenu.styl ...
CSS写动态下拉菜单 -----2017-03-27
动态网站第一步:动态下拉菜单关键点: overflow:hidden max-height xx:hover {} 设置当鼠标移上之后的效果 transition: 设置过度时间 cursor: ...
纯css实现横向下拉菜单
自己最近在捣腾css代码,不光是js能做很多有趣的东西,这货也可以做很多东西,现在把自己的一些作品分享给大家. 做得有点粗糙,大家根据这个思路来,可以自己修改修改. 关于demo:这是一个横向下拉的菜 ...
CSS打造三级下拉菜单
<html><head><meta http-equiv="Content-Type" content="text/html; charse ...
css制作简单下拉菜单
要点:定位,隐藏,显示. (一)先建一个两次列表 <ul id="ul1"> <li>首页</li> <li>第二页 <ul& ...
运用css，对于下拉菜单的制作
<html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <met ...
一个用纯CSS实现的下拉菜单
用CSS做下拉列表的特效,代码如下: <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> & ...
div+css模拟select下拉框
<!DOCTYPE html><html ><head lang="zh"> <meta http-equiv="Content ...

随机推荐

mfix中统计气泡体积
先转换为point data 提取空隙率在0.45-1.0之间的网格,为后面提取气泡内网格做准备把free board部分去掉然后积分选择cell data后就得到气泡内所有网格的体积和,如果网 ...
python全栈开发_day15_函数回调和模块
一:函数回调 def a(fn=None): print("run1") if fn: fn() print("run 2") def b(): print(& ...
#Go# 常用类型转换
#string 2 int int, err := strconv.Atoi(string) #string 2 int64 int64, err := strconv.ParseInt(string ...
sql server 2008 R2 配置管理工具打不开
使用 sql server 配置管理工具是报如下错误: 解决方法: 1 找出 sqlmgmproviderxpsp2up.mof 这个文件的位置 2 以管理员身份运行 mofcomp &quo ...
linux inotifywait 下监控是否有IO
帮助: JDU:/host-001e67a8d50b /log/today # inotifywait -h inotifywait 3.14 Wait for a particular event ...
Linux 命令学习之使用本地SecureCRT连接虚拟机上linux
前提:保证你的虚拟机安装好了,本人使用的是 VMware. 首先在你的window上查看你的 ip地址进入dos 窗口运行 ipconfig. 其次进入你的虚拟机,登录成功.运行 ifconfig ...
MySQL数据库-错误1166 - Incorrect column name 'xxx' 的解决方法
在用Navicat for MySQL给MySQL数据库修改表的字段时报如下的错误: 解决方法:检查字段里面是不是有空格,去掉就可以了.
No result defined for action and result input
今天在编程的时候,我遇到了No result defined for action and result input的错误,这个错误想必大家都有遇到过吧,我今天发了很长时间弄这个错误,我以为我的Act ...
Flex Graphics
<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="ht ...
10种jquery选择器操作详解（转）
jquery选择器大体上可分为4 类: 1.基本选择器2.层次选择器3.过滤选择器4.表单选择器其中过滤选择器可以分为:1.简单过滤选择器2.内容过滤选择器3.可见性过滤选择器4.属性过滤选择器5. ...

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

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

经典的 div + css 鼠标 hover 下拉菜单的更多相关文章

随机推荐

热门专题