经典的 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 下拉菜单的更多相关文章

  1. 关于css中hover下拉框的一个bug

    写hover下拉框的时候会遇到一个奇怪的bug,就是下拉框下来的时候会被所在位置的div遮挡,哪怕下拉框使用的absolute,也会被遮挡. 如图: 这个语言选择的下拉框会被下面的div挡住(截图是已 ...

  2. CSS 实现样式下拉菜单

    下拉菜单的实现 脚本: <script type="text/javascript"> function ShowSub(li) { ]; ; subMenu.styl ...

  3. CSS写动态下拉菜单 -----2017-03-27

    动态网站第一步:动态下拉菜单 关键点: overflow:hidden max-height xx:hover {} 设置当鼠标移上之后的效果 transition:   设置过度时间 cursor: ...

  4. 纯css实现横向下拉菜单

    自己最近在捣腾css代码,不光是js能做很多有趣的东西,这货也可以做很多东西,现在把自己的一些作品分享给大家. 做得有点粗糙,大家根据这个思路来,可以自己修改修改. 关于demo:这是一个横向下拉的菜 ...

  5. CSS打造三级下拉菜单

    <html><head><meta http-equiv="Content-Type" content="text/html; charse ...

  6. css制作简单下拉菜单

    要点:定位,隐藏,显示. (一)先建一个两次列表 <ul id="ul1"> <li>首页</li> <li>第二页 <ul& ...

  7. 运用css，对于下拉菜单的制作

    <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <met ...

  8. 一个用纯CSS实现的下拉菜单

    用CSS做下拉列表的特效,代码如下: <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> & ...

  9. div+css模拟select下拉框

    <!DOCTYPE html><html ><head lang="zh"> <meta http-equiv="Content ...

随机推荐

  1. PHP常见缓存机制

    PHP常用的几种缓存机制_PHP教程 普遍缓存技术 数据缓存:这里所说的数据缓存是指数据库查询PHP缓存机制,每次访问页面的时候,都会先检测相应的缓存数据是否存在,如果不存在,就连接数据库,得到数据, ...

  2. mysql 非安装版的配置

    一直以来都是使用wamp中集成的mysql数据库,今天突然想试试下载一个mysql的zip包进行配置. 一.下载mysql非安装版 下载地址可以到:http://dev.mysql.com/downl ...

  3. 之前为dd写的一个小的demo(robotium)

    测试类的编写: package com.m1905.dd.mobile; import com.robotium.solo.By; import com.robotium.solo.Solo; imp ...

  4. Perl入门

    Perl 是一门开源的脚本语言,由 Larry Wall 所创造,该语言以实用,快速开发为主要目标,与当前流行的面向对象结构化编程有些格格不入,但这并不妨碍 Perl 被广泛流传和使用,世界范围内围绕 ...

  5. OSI及TCP/IP的概念和区别

    什么是TCP/IP协议 TCP/IP协议(Transfer Controln Protocol/Internet Protocol)叫做传输控制/网际协议,又叫网络通讯协议,这个协议是Internet ...

  6. jmeter（4）——简单测试流程

    今天通过一个简单的例子梳理一下用jmeter进行测试的流程 1.确定被测网站:gogomall.com 2.制定测试指标:响应时间和错误率 3.设计测试场景 4.具体测试步骤 1>创建一个测试计 ...

  7. Scrum 冲刺博客第七篇

    一.当天站立式会议照片一张 二.每个人的工作 (有work item 的ID),并将其记录在码云项目管理中 昨天已完成的工作 对排行榜的界面和功能进行初步设计 今天计划完成的工作 重新对界面进行美化 ...

  8. IOS多选单选相册图片

    之前做项目让实现多选相册的图片,自己写了一个demo一直保存在电脑上,今天下午发现电脑128G的容量已经快没有了,准备清理电脑,所以把之前做的一些demo放在博客上,以后方便用. 1.首先准备3个图片 ...

  9. 解决 swap file “*.swp”already exists！问题

     用vim编辑文件实际上是先copy一份临时文件,病映射到内存给你编辑,编辑的是临时文件,当执行:w后才保存临时文件到原文件,执行:q后才删除临时文件. 每次启动检索是否有临时文件,有就询问如何处理, ...

  10. 【angular5项目积累总结】表单复杂校验

    view code form.css :host { display: flex; width: 100%; height:100%; border-left:1px solid #ccc; } .i ...