CSS案例：实现京东导航菜单-马育民老师

仿造京东实现下图效果：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        body{
            font-size: 12px;
        }
        #shortcut{
            background-color: #e3e4e5;
            height: 30px;
            line-height: 30px;  /*文字垂直居中*/
        }
        #shortcut .txt{
            list-style: none;
        }
        #shortcut  .txt > li{
            float: left;
            margin-right: 15px;
        }

        #shortcut .menu_wrap{
            position: relative;
            /*background-color: #5bc0de;*/
        }
        #shortcut .menu_wrap ul{
            display: none;/*默认隐藏*/
            background-color: white;
            position: absolute;
            list-style: none;
            width: 120px;
            border: 1px solid #ccc;
            padding: 10px 5px;
            top:30px;
            /*让 .menu_txt 盖住该元素*/
            z-index: -10;
        }
        #shortcut .menu_wrap:hover ul{
            display: block; /* 鼠标悬停在该元素上，那么 ul 标签就显示 */
        }
        #shortcut  .menu_txt{
            padding: 0 5px;
            /*边框设置为透明*/
            border: 1px solid transparent;
        }
        #shortcut .menu_wrap:hover .menu_txt{
            background-color: #fff;
            /*鼠标hover时，显示边框颜色*/
            border-color: #ccc;
            border-bottom: none;
        }
    </style>
</head>
<body>
<div id="shortcut">
    <ul class="txt">
        <li class="menu_wrap">
            <div class="menu_txt">
                <a href="#">我的京东</a>
            </div>
            <ul>
                <li>待处理订单</li>
                <li>返修退换货</li>
                <li>我的问答</li>
                <li>我的关注</li>
            </ul>
        </li>
        <li class="menu_wrap">
            <div class="menu_txt">
                <a href="#">企业采购</a>
            </div>
            <ul>
                <li>企业购</li>
                <li>公共采购</li>
                <li>工业品商用</li>
                <li>场景馆</li>
            </ul>
        </li>
    </ul>
</div>
</body>
</html>
原文出处：https://malaoshi.top/show_1IX5pF5QEiLf.html