html中下拉栏向左对齐（蓝色下拉框如何和黑色导航栏对齐？）

img

img

img

img

img


我想要蓝色的下拉栏和上面的黑框对齐

<!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-top: 0px;
        }
        
        .dropdown {
            list-style: none;
        }
        /* 消除标记 */
        
        .top {
            background: url(logo/1.png);
            background-repeat: no-repeat;
            /* 背景图片只显示一次 */
            background-size: 225px 50px;
            width: 1440px;
            height: 50px;
            margin: 0 auto;
            background-color: black;
        }
        
        .logo {
            width: 1440px;
            height: 50px;
            margin: 0 auto;
        }
        
        .logo1 {
            float: left;
            margin-left: 400px;
        }
        
        .logo2 {
            float: left;
            margin-left: 30px;
        }
        
        .logo3 {
            float: left;
            margin-left: 30px;
        }
        
        .logo4 {
            float: left;
            margin-left: 30px;
        }
        
        .logo5 {
            float: left;
            margin-left: 30px;
        }
        
        .dropdown {
            display: inline-block;
        }
        /* 使元素独占一个盒子 */
        
        .dropdown-content {
            display: none;
            position: absolute;
            background-color: rgb(38, 146, 196);
            width: 1440px;
            height: 300px;
            /* 设置链接元素的最小宽度 */
            box-shadow: 0px 5px 0px 0px rgb(121, 121, 120);
            /* 设置下拉框阴影 上下左右顺序*/
            overflow: auto;
            /* 如果内容被修剪，则浏览器会显示滚动条，以便查看其余内容。flex中的属性 */
            margin-top: 50px;
            margin-left: 0;
        }
        /* 隐藏菜单 */
        
        .skill-box {
            float: left;
            width: 360px;
            height: 250px;
            background-color: rgba(0, 0, 0, 0)
        }
        
        .logo1 :hover {
            color: #fff;
            background: rgba(0, 114, 170, 1);
        }
        
        .logo2 :hover {
            color: #fff;
            background: rgba(234, 85, 41, 1);
        }
        
        .logo3 :hover {
            color: #fff;
            background: rgba(253, 209, 0, 1);
        }
        
        .logo4 :hover {
            color: #fff;
            background: rgba(167, 166, 166, 1);
        }
        
        .logo5 :hover {
            color: #fff;
            background: rgba(217, 217, 217, 1);
        }
        /* 下拉技能盒子 */
        
        .dropdown:hover .dropdown-content {
            display: block;
        }
    </style>
</head>

<body>
    <div class="top">
        <ul class="logo">
            <div class="dropdown">
                <a href="#" class="logo1"><img src="logo/蓝鱼.png" height="50"></a>
                <div class="dropdown-content">
                    <!-- dropdown-content下拉内容 -->
                    <div class="dropdown-box">
                        <div class="skill-box">1</div>
                        <div class="skill-box">2</div>
                        <div class="skill-box">3</div>
                        <div class="skill-box">4</div>
                    </div>


                </div>

            </div>


            <div class="dropdown">
                <a href="#" class="logo2"><img src="logo/红鱼.png" height="50"></a>
                <div class="dropdown-content">
                    <!-- dropdown-content下拉内容 -->
                    <a href="#">1</a>
                    <a href="#">2</a>
                    <a href="#">3</a>
                </div>

            </div>


            <div class="dropdown">
                <a href="#" class="logo3"><img src="logo/黄鱼.png" height="50"></a>
                <div class="dropdown-content">
                    <!-- dropdown-content下拉内容 -->
                    <a href="#">1</a>
                    <a href="#">2</a>
                    <a href="#">3</a>
                </div>

            </div>


            <div class="dropdown">
                <a href="#" class="logo4"><img src="logo/黑鱼.png" height="50"></a>
                <div class="dropdown-content">
                    <!-- dropdown-content下拉内容 -->
                    <a href="#">1</a>
                    <a href="#">2</a>
                    <a href="#">3</a>
                </div>

            </div>


            <div class="dropdown">
                <a href="#" class="logo5"><img src="logo/白鱼.png" height="50"></a>
                <div class="dropdown-content">
                    <!-- dropdown-content下拉内容 -->
                    <a href="#">1</a>
                    <a href="#">2</a>
                    <a href="#">3</a>
                </div>

            </div>

        </ul>


    </div>

</body>

</html>

left跟上面黑块的左侧距离保持一致

img