無法在 css 的下拉菜單中獲得全寬

Question

我正在創建一個大學項目。 我想要全寬的下拉菜單。 雖然，我不知道為什么我會得到這個輸出。 我嘗試了很多方法，但無法獲得正確的輸出。

我的代碼的輸出

我想要的輸出是

我想要的輸出

這是我的代碼。

 .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

請嘗試以下代碼。

 .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; width:100%; } .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 a{ display:inline-block; width:100%; } .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</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 2

在CSS的末尾添加此選項可取消浮動下拉菜單項並為其提供完整寬度。

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

Answer 3

這是滿足您需求的簡單代碼版本。 您可以根據需要進行更改

 const $menuIcon = document.querySelector('.fa-bars'); const $secondaryNav = document.querySelector('.secondary-nav'); const toggleSecondaryNav = (add) => { if (add) $secondaryNav.classList.add('show-secondary-nav'); else $secondaryNav.classList.remove('show-secondary-nav'); }; $menuIcon.addEventListener('mouseover', (e) => toggleSecondaryNav(true)); $menuIcon.addEventListener('mouseout', (e) => toggleSecondaryNav(false)); $secondaryNav.addEventListener('mouseover', (e) => toggleSecondaryNav(true)); $secondaryNav.addEventListener('mouseout', (e) => toggleSecondaryNav(false)); 

 body { margin: 0; } .main-nav { background-color: #222; padding: 0 25px; display: flex; align-items: center; } .main-nav a { padding: 15px 0; } nav a { color: #fff; text-decoration: none; font-size: 1.1rem; } i.fa-bars { color: #fff; margin: 0 0 0 15px; cursor: pointer; font-size: 1.7rem; padding: 10px; } i.fa-bars:hover { background-color: red; } .secondary-nav { background-color: #000; display: flex; flex-direction: column; max-height: 0; overflow: hidden; transition: max-height 0.7s ease; } .secondary-nav a { margin: 0 0 0 20px; padding: 8px 15px; } .secondary-nav a:first-child { margin-top: 10px; } .secondary-nav a:last-child { margin-bottom: 10px; } .show-secondary-nav { max-height: 170px; } 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" rel="stylesheet"/> <nav> <div class="main-nav"> <a href="#">Home</a> <i class="fas fa-bars"></i> </div> <div class="secondary-nav"> <a href="#">Register</a> <a href="#">Login</a> <a href="#">Admin</a> </div> </nav> 

Answer 4

刪除.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>