html - 无法在 css 的下拉菜单中获得全宽

Question

我正在创建一个大学元素。我想要全宽的下拉菜单。虽然，我不知道为什么我会得到这个输出。我尝试了很多方法，但无法得到正确的输出。

output of my code

我想要的输出是

output that I want

这是我的代码。

.clearfix:before,.clearfix:after{
                content: " ";
                display: table;
            }
            .clearfix:after{
                clear: both;
            }
            
            .head_nav{
                top: 0;
                position: sticky;
                z-index: 1;
                background-color: #262626;
                margin-bottom: 8px;
            }
            .head_nav a{
                color: #d9d9d9;
                float: left;
                text-decoration: none;
            }
            .head_nav a:hover{
                color: white;
                text-decoration: none;
            }
            .dropdown {
                float: left;
            }
            .dropdown .menu_button {
                font-size: 16px;  
                border: none;
                outline: none;
                color: white;
                background-color: inherit;
            }
            .menu_dropdown .header {
                background: red;
                padding: 16px;
                color: white;
            }
            .menu_dropdown {
                display: none;
                position: absolute;
                width: 100%;
                left: 0;
                z-index: 1;
                background-color: #262626;
            }
            .dropdown:hover .menu_dropdown {
                display: block;
            }
            .menu_dropdown a:hover {
                color: white;
            }
            .dropdowncontainer{
                background-color: inherit;
            }

<div class="head_nav clearfix">
                <a href="#">Home</a>
                <div class="dropdown">
                    <button class="menu_button">
                        <i class="fa fa-bars" aria-hidden="true"></i>
                    </button>
                    <div class="menu_dropdown">
                        <div class="dropdowncontainer">
                            <a href="#">Register</a>
                            <a href="#">Login</a>
                            <a href="#">Admin</a>
                        </div>
                    </div>
                </div>
            </div>

我希望这个下拉菜单宽度为全宽，所有内​​容都左对齐。谁能帮帮我？

Answer 1

删除 .dropdown 类 float:left 并添加以下给定的 css:

.menu_dropdown .dropdowncontainer a{
  display:block;
  width:100%;
}

body{
margin:0px;
padding:0px;
}

.clearfix:before,.clearfix:after{
            content: " ";
            display: table;
        }
        .clearfix:after{
            clear: both;
        }

        .head_nav{
            top: 0;
            position: sticky;
            z-index: 1;
            background-color: #262626;
            margin-bottom: 8px;
        }
        .head_nav a{
            color: #d9d9d9;
            float: left;
            text-decoration: none;
        }


        .dropdown .menu_button {
            font-size: 16px;  
            border: none;
            outline: none;
            color: white;
            background-color: inherit;
        }
        .menu_dropdown .header {
            background: red;
            padding: 16px;
            color: white;
        }
        .menu_dropdown {
            display: none;
            position: absolute;
            width: 100%;
            left: 0;
            z-index: 1;
            background-color: #262626;
        }
        .menu_dropdown .dropdowncontainer a{
          display:block;
          width:100%;
        }
        .menu_button:hover+.menu_dropdown {
            display: block;
        }
        .menu_dropdown a:hover {
            color: white;
        }
        .dropdowncontainer{
            background-color: inherit;
        }

<script src="https://use.fontawesome.com/ecdc7512a9.js"></script>


<div class="head_nav clearfix">
     
     <a href="#">Home</a>
        <div class="dropdown">
            <button class="menu_button">
                <i class="fa fa-bars" aria-hidden="true"></i>
            </button>
            <div class="menu_dropdown">
                <div class="dropdowncontainer">
                    <a href="#">Register</a>
                    <a href="#">Login</a>
                    <a href="#">Admin</a>
                </div>
            </div>
        </div>
    </div>