经典的 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. Django分页类的封装

    Django分页类的封装 Django ORM  封装 之前有提到(Django分页的实现)会多次用到分页,将分页功能封装起来能极大提高效率. 其实不是很难,就是将之前实现的代码全都放到类中,将需要用 ...

  2. 蓝桥杯-学霸的迷宫（BFS+记录操作）

     算法提高 学霸的迷宫   时间限制:1.0s   内存限制:256.0MB      问题描述 学霸抢走了大家的作业,班长为了帮同学们找回作业,决定去找学霸决斗.但学霸为了不要别人打扰,住在一个城堡 ...

  3. excel 正则表达式用法

    Private Sub RegEx_Replace()        Dim myRegExp As Object      Dim Myrange As Range, C As Range      ...

  4. Hive 外部表新增字段或者修改字段类型等不生效

    标题比较笼统,实际情况是: 对于Hive 的分区外部表的已有分区,在对表新增或者修改字段后,相关分区不生效. 原因是:表元数据虽然修改成功,但是分区也会对应列的元数据,这个地方不会随表的元数据修改而修 ...

  5. docker私有仓库搭建及认证

    什么是docker? Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的 Linux 机器上,也可以实现虚拟化.容器是完全使用沙箱机 ...

  6. PTA (Advanced Level) 1014 Waiting in Line

    Waiting in Line Suppose a bank has N windows open for service. There is a yellow line in front of th ...

  7. Flex4 outerDocument

    <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="ht ...

  8. 【转】WinForm窗体显示和窗体间传值

    以前对WinForm窗体显示和窗体间传值了解不是很清楚 最近做了一些WinForm项目,把用到的相关知识整理如下 A.WinForm中窗体显示 显示窗体可以有以下2种方法: Form.ShowDial ...

  9. jquery 选择唯一值 选择器“”非“用法

    $(document).ready(function () { $("#addwork").hide(); $(".xi").click(function(){ ...

  10. MongoDB 从入门到精通

    1,安装并启动数据库       从官网(www.mongodb.org/downloads)下载一个适合你平台的版本,我的系统是win7 64位的,下载文件也就10几M,将下载的文件解压放到任何目录 ...