纯css实现下拉式导航

基本信息

源码名称：纯css实现下拉式导航

源码大小：4.14KB

文件格式：.html

开发语言：CSS

更新时间：2020-03-31

友情提示：（无需注册或充值，赞助后即可获取资源下载链接）

嘿，亲！知识可是无价之宝呢，但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下，绝对物超所值哦！如有下载和支付问题，请联系我们QQ(微信同号)：813200300

本次赞助数额为： 1 元　

源码介绍

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>渐变效果下拉菜单</title>
    <style>
        body{
            background: #ebebeb;
            width: 990px;
            margin: 20px auto;
            color: #666;
        }
        a{color: #333;}
        /*定义菜单外框样式*/
        #nav{
            margin: 0;
            padding: 7px 6px 0;
            line-height: 100%;
            border-radius: 2em;
            box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
            background: #8b8b8b;/*兼容不支持渐变的浏览器*/
            background: linear-gradient(top,#a9a9a9 #7a7a7a);
            border: 1px solid #6d6d6d;
        }
        /*定义子菜单列表项样式*/
        #nav li{
            margin: 0 5px;
            padding: 0 0 8px;
            float: left;
            position: relative;
            list-style: none;
        }
        /*主菜单链接样式*/
        #nav a{
            font-weight: bold;
            color: #e7e5e5;
            text-decoration: none;
            display: block;
            padding: 8px 20px;
            margin: 0;
            border-radius: 1.6em;
            text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
        }
        #nav .current a,#nav li:hover>a{
            background: linear-gradient(top,#ebebeb,#a1a1a1);
            color: #444444;
            border-top: solid 1px #f8f8f8;
            box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
            text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
        }
        #nav ul li:hover a,#nav li:hover li a {
            background: none;
            border: none;
            color: #666;
            box-shadow: none;
        }
        #nav ul a:hover{
            background: #0399d4 !important;
            background: linear-gradient(top,#04acec,#0186ba)!important;
            color: #fff !important;
            border-radius: 0;
            text-shadow: 0 1px 1px rgba(0, 0, 0, .1);
        }
        #nav ul{
            background: #ddd;
            background: linear-gradient(top,#fff,#cfcfcf);
            display: none;
            margin: 0;
            padding: 0;
            width: 185px;
            position: absolute;
            top: 35px;
            left: 0;
            border: 1px solid #b4b4b4;
            border-radius: 10px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
        }
        #nav li:hover>ul{display: block;}
        #nav ul li{
            float:none;
            margin: 0;
            padding: 0;
        }
        #nav ul a{
            font-weight: normal;
            text-shadow: 0 1px 1px rgba(255, 255, 255, 0.9);
        }
        #nav ul ul{
            left: 131px;
            top: -3px;
        }
        #nav ul li:first-child>a{
            border-radius:9px;
        }
        #nav ul li:last-child>a{
            border-radius:9px;
        }
        #nav::after{
            content: ".";
            display: block;
            clear: both;
            visibility: hidden;
            line-height: 0;
            height: 0;
        }
        #nav{display: inline-block;}
    </style>
</head> 
<body>
    <ul id="nav">
        <li class="current"><a href="#">主页</a></li>
        <li><a href="##">子菜单</a>
            <ul>
                <li><a href="#">子菜单1</a></li>
                <li><a href="#">子菜单2</a></li>
                <li><a href="#">子菜单3</a>
                    <ul>
                        <li><a href="#">三级菜单1</a></li>
                        <li><a href="#">三级菜单2</a></li>
                        <li><a href="#">三级菜单3</a>
                            <ul>
                                <li><a href="#">四级菜单1</a></li>
                                <li><a href="#">四级菜单2</a></li>
                                <li><a href="#">四级菜单3</a>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</body>
</html>