無法從下拉菜單中刪除背景

我是CSS的新手。有人可以幫助我瞭解我在這裏做錯了什麼。我特別關心下拉菜單的背景，它似乎從父母ul繼承。但是我想創建一個輸出，其背景獨立於父ul。我的輸出是這樣的： Output 而期望的輸出是： Expected output 我想學習從w3schools網站創建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>

來源

2017-07-17 Mayank

這不是關於任何「背景」，而是關於元素所佔的空間。如果您不希望打開的子菜單將其餘的頁面內容向下推，那麼您需要將其完全放置。 – CBroe

你需要把你的下拉列表div出文檔流 - 使用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>

來源

2017-07-17 10:28:01 sol

感謝您解釋代碼背後的基本原理。 – Mayank

您可以添加以下CSS的下拉菜單：

見Fiddle Demo

CSS：

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

來源

2017-07-17 10:27:06 Jainam

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

把它添加position: absolute瞧。

來源

2017-07-17 10:29:08 Zabusy

將.dropdown-content和position中的位置絕對值用於.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%; 
}

來源

2017-07-17 10:30:32

無法從下拉菜單中刪除背景

回答

相關問題