navbarのbackgroundcolorは、ドロップダウンメニューの背後に表示されています。

Question

ナビゲーションバーの上にマウスを置いてメニュードロップダウンメニューを表示すると、そのメニューの背景色が変わります。ドロップダウンメニューの一番下には、ナビバーの背景の一部が表示されますが、どうすればこの問題を取り除くことができますか？また、どのように私はnavbarの色を画面の全体のサイズで取ることができますか？

/*Navigation bar*/ 
 
.wrap{ 
 
    width: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
    position: absolute; 
 
} 
 
.navbar{ 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: auto; 
 
    width: 100%; 
 
} 
 
.navbar li{ 
 
    display: inline-block; 
 
    position: relative; 
 
    width: 120px; 
 
    padding: 10px 0px; 
 
    float: left; 
 
    color: white; 
 
    font-size: 16px; 
 
    cursor: pointer; 
 
    text-align: center; 
 
    background-color: #101010; 
 
} 
 
.navbar li a{ 
 
    text-decoration: none; 
 
    color: white; 
 
} 
 
.navbar li ul{ 
 
    padding-top: 10px; 
 
} 
 
.drop-content li:hover{ 
 
    transition-property: background-color; 
 
    transition-delay: 0.1s; 
 
    transition-duration: 1s; 
 
    background-color: #e60000; 
 
    height: auto; 
 
} 
 
.drop-content li{ 
 
    text-align: left; 
 
    background-color: #003566; 
 
    color: white; 
 
    padding: 10px; 
 
    margin: 0; 
 
    box-shadow: 0px 1px 0px 1px hsl(0, 0%, 15%); 
 
} 
 
/* dropdown menu */ 
 
.drop-content{ 
 
    margin: 0; 
 
    padding: 0; 
 
    position: relative; 
 
    display: none; 
 
    text-align: left; 
 
} 
 
.navbar li:hover .drop-content{ 
 
    display: block; 
 
}

<div class="wrap"> 
 
      <ul class="navbar"> 
 
       <li><a href="#">Home</a></li> 
 
       <li>Link 1 
 
        <ul class="drop-content"> 
 
         <li>Link 1</li> 
 
         <li>Link 2</li> 
 
         <li>Link 3</li> 
 
         <li>Link 4</li> 
 
        </ul> 
 
       </li> 
 
       <li>Link 2 
 
        <ul class="drop-content"> 
 
         <li>Link 1</li> 
 
         <li>Link 2</li> 
 
         <li>Link 3</li> 
 
         <li>Link 4</li> 
 
        </ul> 
 
       </li> 
 
       <li>Link 3 
 
        <ul class="drop-content"> 
 
         <li>Link 1</li> 
 
         <li>Link 2</li> 
 
         <li>Link 3</li> 
 
         <li>Link 4</li> 
 
        </ul> 
 
       </li> 
 
       <li>Link 4</li> 
 
       <li>Link 5</li> 
 
       <li>Link 6</li> 
 
       <li><a href="#">Link 7</a></li> 
 
       <li><a href="#">Link 8</a></li> 
 
      </ul> 
 
     </div>

あなたはまた、私はそれをもう少し簡単にすることができますどのように私に言うことができますか？私はそれに多くのCSSに慣れたと思う原因

Answer 1

'navbar'の高さとそれには、liではなく、背景を設定します。

.navbar { 
     margin: 0; 
     padding: 0; 
     background-color: #101010; 
     display: inline-block; 
     height: 45px; 
    } 

liをバックグラウンドから削除します。あなたは終わった。

.navbar li { 
    display: inline-block; 
    position: relative; 
    width: 120px; 
    padding: 10px 0px; 
    float: left; 
    color: white; 
    font-size: 16px; 
    cursor: pointer; 
    text-align: center; 
}