博客列表 >7.19 二级菜单 css实现方式小案例

7.19 二级菜单 css实现方式小案例

背着吉他的女侠
背着吉他的女侠原创
2019年07月22日 16:28:06491浏览

7.19 二级菜单 css实现方式小案例
QQ图片20190722162628.png

纯css样式展示导航

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>二级菜单展示效果</title>
</head>
<style>
ul,li{
    padding: 0;
    margin: 0;
    list-style: none;
}
    a{text-decoration:none;
        color: #fff;
        font-size: 14px;}

    a:hover{

        color: rgba(12,253,255,0.88);
        font-size: 16px;
    }

    .sy-nav{
        width: 600px;
        height: 50px;
        background-color: black;
        line-height: 50px;
    }
    .main-menu li{
       float: left;
        line-height: 50px;
        width: 130px;
        text-align: center;
        position: relative;    /*定位父级*/
    }
    ul li :hover{
        display: block;
        background-color: #0000FF;
    }
    .sub-menu{
        width: 260px;
        height: 300px;
        background-color: #1E9FFF;
        position: relative;
        top: 10px;
        left: 0;
        /*默认不显示*/
        display: none;
    }
    .main-menu li:hover .sub-menu{

        display: block;
    }




</style>
<body>
<div class="sy-nav">
    <ul class="main-menu">
       <li><a href="">我的收藏</a></li>
        <li><a href="">我的产品</a>
        <ul class="sub-menu">
            <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>
            <ul class="sub-menu">
                <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>

    </ul>





</div>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议