CSS--利用CSS实现一个简易的二级菜单（仿京东）

来源：互联网发布：nginx负载均衡编辑：程序博客网时间：2024/05/16 02:11
功能：仿照京东首页，利用CSS简单实现一个二级菜单
完整代码：
<pre name="code" class="javascript"><!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style type="text/css">        * {            margin: 0;            padding: 0;        }        .outer-div {            border-bottom: 1px solid darkgray;            background-color: lightgray;            height: 30px;        }        .inner-div {            margin: 0 auto;            width: 600px;        }        .inner-div>ul {            float: left;        }        .inner-div>ul>li {            list-style-type: none;            float: left;            text-align: center;            font-size: 12px;            line-height: 30px;        }        .space {            width: 1px;            height: 12px;            background-color: dimgray;            margin: 9px 3px 3px 3px;        }        a {            text-decoration: none;            color: darkslategray;        }        a:hover {            color: darkred;        }        .content {            position: relative;        }        .first-title {            width: 85px;        }        .content>div {            border-left: 1px solid lightgray;            border-right: 1px solid lightgray;        }        .arrow {            transition: transform 0.2s linear;        }        .content:hover>div {            display: block;            background-color: whitesmoke;            border-left: 1px solid lightgray;            border-right: 1px solid lightgray;        }        .content:hover .arrow {            transform-origin:center 6px ;            transform: rotate(180deg);        }        .first-list {            display: none;            position: absolute;            width: 110px;            height: 60px;            border-width: 0px 1px 1px 1px;            border-color: lightgray;            border-style: solid;        }        .customer>div:last-child {            height: 130px;            width: 85px;        }        .arrow {            display: inline-block;            position: absolute;            top: 10px;            left: 70px;            width: 0px;            height: 0px;            border-top: 4px solid transparent;            border-left: 4px solid transparent;            border-right: 4px solid transparent;            border-bottom: 4px solid darkgray;        }    </style></head><body>    <div class="outer-div">        <div class="inner-div">            <ul>                <li class="content">                    <div class="first-title">                        <a href="javascript: void(0)">我的淘宝</a>                        <div class="arrow"></div>                    </div>                    <div class="first-list">                        <p><a href="javascript: void(0)">已买到的宝贝</a></p>                        <p><a href="javascript: void(0)">已卖出的宝贝</a></p>                    </div>                </li>                <li class="space"></li>                <li class="content">                    <div class="first-title">                        <a href="javascript: void(0)">收藏夹</a>                        <div class="arrow"></div>                    </div>                    <div class="first-list">                        <p><a href="javascript: void(0)">收藏的宝贝</a></p>                        <p><a href="javascript: void(0)">收藏的店铺</a></p>                    </div>                </li>                <li class="space"></li>                <li class="content customer">                    <div class="first-title">                        <a href="javascript: void(0)">客服服务</a>                        <div class="arrow"></div>                    </div>                    <div class="first-list">                        <p><a href="javascript: void(0)">帮助中心</a></p>                        <p><a href="javascript: void(0)">售后服务</a></p>                        <p><a href="javascript: void(0)">售后服务</a></p>                        <p><a href="javascript: void(0)">售后服务</a></p>                    </div>                </li>            </ul>        </div>    </div></body><script type="text/javascript"></script></html>
0 0