经典的 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. vue2.0用法技巧汇总

    1.class拼接: 2.select下拉截取: <template> <!--vip班支付报名页面--> <div id="payRecordMain&quo ...

  2. [温故]图解java多线程设计模式（二）

    join & interrupt 这俩方法属于线程对象里的方法,属于线程本身的操作. join方法 用于等待一个线程的终止,等待期间将会阻塞,直到被等待的线程终止结束. 所以join可以用来做 ...

  3. android开发中的BaseAdapter之理解（引用自网络，总结的很好，谢谢）

    android中的适配器(Adapter)是数据与视图(View)之间的桥梁,用于对要显示的数据进行处理,并通过绑定到组件进行数据的显示. BaseAdapter是Android应用程序中经常用到的基 ...

  4. javascript的HelloWorld

    javascript:边解释边执行.是一种解释型语言. defer属性,延迟执行代码,(整个页面加载完之后,window.onload) 代码: <!DOCTYPE HTML PUBLIC &q ...

  5. WPF DataTemplate與ControlTemplate

    一. 前言     什麼是DataTemplate? 什麼是ControlTemplate? 在stackoverflow有句簡短的解釋 "A DataTemplate, therefore ...

  6. Windows下编程--模拟时钟的实现

    windows下编程--模拟时钟的实现: 主要可以分为几个步骤: (1)   编写按键事件处理(启动和停止时钟) (2)   编写时钟事件处理,调用显示时钟函数 (3)   编写显示时钟函数,要调用显 ...

  7. 【angular5项目积累总结】优秀组件以及应用实例

    1.手机端 图片预览组件 组件:sideshow 效果图:(预览图全屏 且可以左右移动)                  code: <div class="row ui-app-s ...

  8. postgresql 备份与恢复

    备份 C:\PostgreSQL\\bin>pg_dump -h localhost -p -U postgres Mes > d:/.bak 恢复 C:\PostgreSQL\\bin& ...

  9. vue-cli 中遇见的问题，记录爬坑日常！

    本片文章我将会记录使用vue-cli 以及一些相关插件遇见的问题和解决方案,另外本文章将会持续更新,本着互联网分享精神,希望我所记录的日常能对大家有所帮助. 1.在img和html文件处于同级阶段,i ...

  10. C# 视频转换类

    using System.Web; using System.Configuration; namespace DotNet.Utilities { public class VideoConvert ...