ドロップダウンメニューから背景を削除できません

Question

私はCSSの初心者です。誰かが私がここで間違っていることを理解するのを助けてくれますか？私は親のulから継承しているようなドロップダウンメニューの背景について特に心配しています。しかし、バックグラウンドが親のulから独立している出力を作成したい。 Output 予想される出力は次のとおりです。 Expected output w3schoolsのWebサイトからCSSドロップダウンを作成しようとしています。 コード：

.navbar { 
 
     list-style-type: none; 
 
     margin: 0; 
 
     padding: 0; 
 
     overflow: hidden; 
 
     background-color: #333; 
 
    } 
 

 
    li { 
 
     float: left; 
 
    } 
 

 
    li a, .dropdown-button { 
 
     display: inline-block; 
 
     color: white; 
 
     text-align: center; 
 
     padding: 14px 16px; 
 
     text-decoration: none; 
 
    } 
 

 
    .navbar li:hover a, .navbar .dropdown .dropdown-button { 
 
     background-color: red; 
 
    } 
 

 
    .navbar .dropdown { 
 
     display: inline-block; 
 
    } 
 

 
    .navbar .dropdown .dropdown-content { 
 
     z-index: 1; 
 
     background-color: grey; 
 
     color: orange; 
 
     display: none; 
 
     width: 200px; 
 
    } 
 

 
    .navbar .dropdown .dropdown-content a { 
 
     display: block; 
 
     padding: 15px 20px; 
 
     background-color: white; 
 
     color: black; 
 
     text-align: center; 
 
     vertical-align: center; 
 
    } 
 

 
    .navbar .dropdown .dropdown-content a:hover { 
 
     background-color: red; 
 
    } 
 

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

 
    .page-content { 
 
     display: inline-block; 
 
    }

<ul class="navbar"> 
 
    <li><a href="www.google.com" title="Google">Google</a></li> 
 
    <li><a href="www.facebook.com" title="Facebook">Facebook</a></li> 
 
    <li><a href="www.careerlauncher.com" title="Career Launcher">Career Launcher</a></li> 
 
    <li><a href="www.cleducate.in" title="CL Educate">CL Educate</a></li> 
 
    <li class="dropdown"> 
 
     <a class="dropdown-button" href="www.more.com" title="More...">More...</a> 
 
     <div class="dropdown-content"> 
 
      <a href="www.1.com" title="1">1</a> 
 
      <a href="www.2.com" title="2">2</a> 
 
      <a href="www.3.com" title="3">3</a> 
 
      <a href="www.4.com" title="4">4</a> 
 
     </div> 
 
    </li> 
 
</ul>

Answer 1

：

がFiddle Demo

CSSを参照してください。ドキュメントフローのうち- この追加position: absoluteと出来上がりにposition: absolute

More info

.navbar { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #333; 
 
} 
 

 
li { 
 
    float: left; 
 
} 
 

 
li a, 
 
.dropdown-button { 
 
    display: inline-block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
} 
 

 
.navbar li:hover a, 
 
.navbar .dropdown .dropdown-button { 
 
    background-color: red; 
 
} 
 

 
.navbar .dropdown { 
 
    display: inline-block; 
 
} 
 

 
.navbar .dropdown .dropdown-content { 
 
    z-index: 1; 
 
    background-color: grey; 
 
    color: orange; 
 
    display: none; 
 
    width: 200px; 
 
    position: absolute; 
 
    box-shadow: -2px 3px 7px #BBB; 
 
} 
 

 
.navbar .dropdown .dropdown-content a { 
 
    display: block; 
 
    padding: 15px 20px; 
 
    background-color: white; 
 
    color: black; 
 
    text-align: center; 
 
    vertical-align: center; 
 
} 
 

 
.navbar .dropdown .dropdown-content a:hover { 
 
    background-color: red; 
 
} 
 

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

 
.page-content { 
 
    display: inline-block; 
 
}

<ul class="navbar"> 
 
    <li><a href="www.google.com" title="Google">Google</a></li> 
 
    <li><a href="www.facebook.com" title="Facebook">Facebook</a></li> 
 
    <li><a href="www.careerlauncher.com" title="Career Launcher">Career Launcher</a></li> 
 
    <li><a href="www.cleducate.in" title="CL Educate">CL Educate</a></li> 
 
    <li class="dropdown"> 
 
    <a class="dropdown-button" href="www.more.com" title="More...">More...</a> 
 
    <div class="dropdown-content"> 
 
     <a href="www.1.com" title="1">1</a> 
 
     <a href="www.2.com" title="2">2</a> 
 
     <a href="www.3.com" title="3">3</a> 
 
     <a href="www.4.com" title="4">4</a> 
 
    </div> 
 
    </li> 
 
</ul>

Answer 2

あなたはドロップダウン・メニューのCSSの下に追加することができます：あなたは、あなたのドロップダウンを取る必要がある

.navbar .dropdown:hover .dropdown-content { 
     display: block; 
     position: absolute; 
     box-shadow: 0px 1px 2px 0px #c5c5c5; 
    } 

Answer 3

.navbar .dropdown .dropdown-content { 
z-index: 1; 
background-color: grey; 
color: orange; 
display: none; 
width: 200px; 
} 

を使用しています。

Answer 4

.dropdown-contentの絶対位置と.dropdownの相対位置を使用します。以下はCSSです。

.navbar .dropdown { 
    display: inline-block; 
    position: relative; 
} 

.navbar .dropdown .dropdown-content { 
    z-index: 1; 
    background-color: grey; 
    color: orange; 
    display: none; 
    width: 200px; 
    position: absolute; 
    left: 0px; 
    top: 100%; 
}