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