《如何写出商城的菜单》-CSDN博客

首先我们需要写出一个大的div以它为基准给后来的安排位置

首先分出一个基准盒子，在做一个基座，而基座上有二个板块，然后在第二个板块上还有还有2个小板块，这样的框架写====》下面时代码区

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>快速度导航栏</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
            text-decoration: none;
        }
        a {
            margin-top: -10px;
            color: rgb(176,176,176);
            line-height: 36px;
        }
        span{
            line-height: 36px;
            color: rgb(176,176,176);
        }
        body{
            background-color: rgb(135, 138, 141);
        }

        .box{
            width: auto;
            height: 46px;
            background-color: rgb(51, 51, 51);
            font-size: 12px;
        }

        nav {
            margin: -10px auto;
            width: 1200px;
            height: 36px;
        }

        #ul2 {
            margin-top: 10px;
            display: inline-block;
            float: none;
            width: 240px;
        }

        .ul {
            margin-top: 10px;
            width: 800px;
            display: block;
            float: left;
        }
        img{
            vertical-align: middle;
        }
        
        li {
            text-align: center; 
            float: left;
            display: block;
        }

        .ks {
            box-sizing: border-box;
            text-align: center;
            width: 120px;
            height: 36px;
            float: right;
            background-color: rgb(66,66,66);
            
        }
        .cc{
            width: 362px;
            display: block;
            display: none;
            height: 126px;
            background-color: rgb(255, 255, 255);
            text-align: center;
            float: right;
        }
        .cc p{
            line-height: 100px;
        }

        .i{
            float: left;
            margin: 0 3.6px;
        }
        
        .ks:hover .cc{
            display: block;
        }
        ul>.ks:hover{
            background-color: rgb(255, 255, 255);
        }
        .ks:hover a{
            color: rgb(255, 51, 0);
        }
        a:hover{
            color: rgb(255, 255, 255);
        }

    </style>
</head>

<body>
    <div class="box">
        <nav>
            <ul class="ul">
                <li><a href="#">小米官网</a></li>
                <span class="i"">|</span>
                <li><a href="#">小米商城</a></li>
                <span class="i">|</span>
                <li><a href="#">MIUI</a></li>
                <span  class="i"">|</span>
                <li><a href="#">IoT</a></li>
                <span  class="i"">|</span>
                <li><a href="#">云服务</a></li>
                <span  class="i"">|</span>
                <li><a href="#">天星数科</a></li>
                <span  class="i"">|</span>
                <li><a href="#">有品</a></li>
                <span class="i"">|</span>
                <li><a href="#">小爱开放平台</a></li>
                <span class="i"">|</span>
                <li><a href="#">企业团购</a></li>
                <span class="i"">|</span>
                <li><a href="#">资质证照</a></li>
                <span class="i"">|</span>
                <li><a href="#">协议规则</a></li>
                <span class="i"">|</span>
                <li><a href="#">下载app</a></li>
                <span class="i"">|</span>
                <li><a href="#">Select Location</a></li>
            </ul>
            <ul id="ul2">
                <li><a href="#">登陆</a></li>
                <span class="i"">|</span>
                <li><a href="#">注册</a></li>
                <span class="i"">|</span>
                <li><a href="#">消息通知</a></li>
                <div class="ks">
                    <a href="../index.html">
                    <img src="../快速导航条/img/购物车-白.png" alt="logo2" style="width: 16px;">
                    购物车
                    （0）</a>
                    <div class="cc">
                        <p>购物车中还没有商品，赶紧选购吧！</p>
                    </div>
                </div>
            </ul>
        </nav>
    </div>
</body>

</html>