经典的 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. easy-mock本地部署成功，访问报错：EADDRNOTAVAIL 0.0.0.0:7300 解决方案

    easy-mock本地部署成功后,迫不及待的想看看是否能正常访问,执行命令 npm run dev 启动项目,访问 127.0.0.1:7300 ,结果郁闷的是报错:EADDRNOTAVAIL 0.0 ...

  2. 洛谷P3980 [NOI2008]志愿者招募

    题解 最小费用最大流 每一天是一条边\((inf-a[i], 0)\) 然后对于一类志愿者, 区间两端连一条\((inf, c[i])\) \(S\)向第一个点连\((inf, 0)\) 最后一个点向 ...

  3. 使用nginx+uwsgi+Django环境部署

    环境准备 Python点这里 nginx点这里 uwsgi点这里

  4. dede两个后台共用一个数据库会出现的问题

    共用数据库内容页图片问题 在include/extend.func.php里面加上 function replaceurl($newurl) { $newurl=str_replace('src=&q ...

  5. Mono for Android - LocationServices not working

    Hi,I have the following code in my location activity.(this code was copied from Xamarin's Location S ...

  6. 网站变灰css

    html{ filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-fi ...

  7. Spring Boot遇到的某些问题

    Spring Boot遇到的某些问题 1.关于templates的html包格式问题: <properties> <project.build.sourceEncoding>U ...

  8. 利用setTimeout来实现setInterval

    在Js中,当我们要在一定间隔时间内不断执行同一函数,我们可以使用setInterval函数,但setInterval在某些情况下使用时也存在一定问题. 1.不去关心回调函数是否还在运行 在某些情况下, ...

  9. Install NDK in Eclipse/Android Studio

    1. Download NDK https://developer.android.com/tools/sdk/ndk/index.html 2.Install NDK $ tar xvf andro ...

  10. WPF简单MVVM实现

    1. MVVM介绍: MVVM就是: Model -- 模型(现实中对象的抽象) View -- UI(用户界面) ViewModel -- UI界面的抽象(给View提供数据,并响应View的操作) ...