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

最新推荐文章于 2021-08-10 17:04:21 发布

陌听

最新推荐文章于 2021-08-10 17:04:21 发布

阅读量1.4k

点赞数 1

分类专栏： CSS 文章标签： css 布局

本文链接：https://blog.csdn.net/she_rryn/article/details/47817187

版权

CSS 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

功能：仿照京东首页，利用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>

陌听

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS--利用CSS实现一个简易的二级菜单（仿京东）

功能：仿照京东首页，利用CSS简单实现一个二级菜单完整代码： * { margin: 0; padding: 0; } .container { height: 30px; background-color: #F
复制链接

扫一扫