下拉菜單不起作用我想要它

Question

我想做一個菜單，其中包含一個菜單項與下拉菜單，但我似乎無法得到它非常正確。 我開始將現有的菜單欄與一段代碼合併爲一個下拉菜單，我已經設法在菜單欄中拖放下拉菜單項，但是我不知道如何讓菜單欄重新回到頂部它左側仍然有空白。 我的下拉菜單中還有一個額外的空項目，我不知道如何擺脫它？

是否有人可以幫助我，我覺得我忽視的東西

.menu-bar { 
 
    position: fixed; 
 
    width: 100vw; 
 
    background-color: #134c95; 
 
    color: white; 
 
    display: flex; 
 
    flex-direction: row; 
 
    justify-content: center; 
 
    opacity: 0.8; 
 
} 
 

 
.menu-item { 
 
    padding: 10px; 
 
    cursor: default; 
 
    font-size: 15pt; 
 
    margin-left: 15px; 
 
    margin-right: 15px; 
 
} 
 

 
.menu-item:hover, 
 
a:hover { 
 
    background-color: white; 
 
    cursor: pointer; 
 
    color: 234c95; 
 
} 
 

 
.menu-bar a { 
 
    color: white; 
 
} 
 

 
.menu-bar a:visited { 
 
    color: white; 
 
} 
 

 
.menu-bar a:link, 
 
.menu-bar a:visited { 
 
    text-decoration: none; 
 
} 
 

 

 
/* 
 
.menu-bar a:hover { 
 
    color: #134c95; 
 
} 
 
*/ 
 

 

 
/* Dropdown Button */ 
 

 
.dropbtn { 
 
    background-color: inherit; 
 
    color: white; 
 
    /* padding: 16px;*/ 
 
    /* font-size: 16px;*/ 
 
    border: none; 
 
    cursor: pointer; 
 
} 
 

 

 
/* The container <div> - needed to position the dropdown content */ 
 

 

 
/* 
 
.dropdown { 
 
    position: fixed; 
 
    display: inline-block; 
 
} 
 
*/ 
 

 

 
/* Dropdown Content (Hidden by Default) */ 
 

 
.dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: white; 
 
    min-width: 160px; 
 
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); 
 
    /* z-index: 1;*/ 
 
} 
 

 

 
/* Links inside the dropdown */ 
 

 
.dropdown-content a { 
 
    color: #234c95; 
 
    padding: 12px 16px; 
 
    text-decoration: none; 
 
    display: block; 
 
} 
 

 

 
/* Change color of dropdown links on hover */ 
 

 
.dropdown-content a:hover { 
 
    background-color: 234c95; 
 
    color: white; 
 
} 
 

 

 
/* Show the dropdown menu on hover */ 
 

 
.dropdown:hover .dropdown-content { 
 
    display: block; 
 
} 
 

 

 
/* Change the background color of the dropdown button when the dropdown content is shown */ 
 

 
.dropdown:hover .dropbtn { 
 
    background-color: white; 
 
    color: #234c95; 
 
}

<div class="menu-bar"> 
 
     <a href="instructiestest.html"> 
 
      <div class="menu-item">Welkom</div> 
 
     </a> 
 
     <a href="instructie2.html"> 
 
      <div class="menu-item">Aanmelden Portbase</div> 
 
     </a> 
 
     <a href="instructie3.html"> 
 
      <div class="menu-item">De App</div> 
 
     </a> 
 
     <a href="testing.html"> 
 
      <div class="dropdown"> 
 
       <button class="dropbtn"> 
 
        <div class="menu-item">Het team</div> 
 
        <div class="dropdown-content"> 
 
         <a href="http://google.com" target="_blank">Google</a> 
 
         <a href="http://facebook.com" target="_blank">Facebook</a> 
 
         <a href="http://youtube.com" target="_blank">YouTube</a> 
 
        </div> 
 
       </button> 
 
      </div> 
 
     </a> 
 
    </div>

Answer 1

從dropdown項刪除a標籤，如下圖所示：

<div class="menu-bar"> 
    <a href="instructiestest.html"> 
     <div class="menu-item">Welkom</div> 
    </a> 
    <a href="instructie2.html"> 
     <div class="menu-item">Aanmelden Portbase</div> 
    </a> 
    <a href="instructie3.html"> 
     <div class="menu-item">De App</div> 
    </a> 
    <div class="dropdown"> 
     <button class="dropbtn"> 
      <div class="menu-item">Het team</div> 
      <div class="dropdown-content"> 
       <a href="http://google.com" target="_blank">Google</a> 
       <a href="http://facebook.com" target="_blank">Facebook</a> 
       <a href="http://youtube.com" target="_blank">YouTube</a> 
      </div> 
     </button> 
    </div> 
</div> 

而且，您的.dropdown-content a:hover規則在您的012中缺少屬性：

.dropdown-content a:hover { 
    background-color: #234c95; 
    color: white; 
} 

這裏是一個工作Fiddle

Answer 2

東西似乎有一個額外的保證金或類似。嘗試加載代碼，並與檢查員覈對。它會以漂亮的顏色向您展示不同的間距類型：https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model

Answer 3

誠實地說，您可能會更好地重新組織這個菜單。我並不是說要苛刻，但代碼結構不夠好，並且有點混亂。

我剛剛調整了一下你的代碼，使它更容易處理。我不太確定這是你的努力來實現，但這裏是東西給你看看：

CSS

#menu-bar { 
    position: fixed; 
    width: 100vw; 
    background-color: #134c95; 
    padding: 15px; 
} 

#menu-bar ul { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
    font-size: 22px; 
    font-family:sans-serif; 
} 

#menu-bar ul li { 
    margin-bottom: 10px; 
    width: 100%;  
} 

#menu-bar ul li a { 
    display: block; 
    padding: 10px; 
    color: #fff; 
    text-decoration: none; 
} 

#menu-bar ul li a:hover { 
    color: #134c95; 
    background-color: #fff; 
} 

#menu-bar ul li ul { 
    display: none; 
} 

#menu-bar ul li:hover ul { 
    display: block; 
} 

HTML

<nav id="menu-bar"> 
    <ul> 
     <li><a href="instructiestest.html">Welkom</a></li> 
     <li><a href="instructie2.html">Aanmelden Portbase</a></li> 
     <li><a href="instructie3.html">De App</a></li> 
     <li class=""><a href="testing.html">Het team</a> 
      <ul> 
      <a href="http://google.com" target="_blank">Google</a> 
      <a href="http://facebook.com" target="_blank">Facebook</a> 
      <a href="http://youtube.com" target="_blank">YouTube</a>  
      </ul> 
     </li> 
    </ul> 
</nav> 

由於你可以看到這很容易理解和遵循。導航元素的ID是您需要設置子元素的樣式。

希望能夠幫助您作爲出發點！