ドロップダウンメニューがうまくいかない

Question

ドロップダウンメニューが1つ含まれているメニューを作成しようとしていますが、それを正しく理解できないようです。 私は、既存のメニューバーとドロップダウン用のコードを組み合わせて始めましたが、メニューバーのドロップダウンアイテムを取得できましたが、メニューバーをもう一度元に戻す方法はわかりません左にはまだ空白があります。 また、ドロップダウンメニューに余分な空のアイテムがあり、それを取り除く方法がわかりません。

誰かが、私は以下のように、あなたのdropdown項目からaタグを削除し、何か

.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

を見下ろすていますように私は感じて私を助けてください：

<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ルールに#がありません属性：

.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

すべての正直なところ、このメニューを完全に再構成する方がよいでしょう。私は厳しいものではありませんが、コードは十分に構造化されておらず、作業するのに少し混乱します。

Iveはコードを微調整して作業しやすくしました。私はあなたを達成しようとしているかを正確にはわからないが、ここであなたが見てみましょうするために何かである：

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> 

として、これは理解して従うのがはるかに簡単であることがわかります。 nav要素のIDは、子要素をスタイルするために必要なものです。

出発点として役立つ希望！