Mayank Mayank - 2 months ago 9
CSS Question

Can't remove background from dropdown menu

I am a newbie to CSS. Could someone please help me understand what I am doing wrong here. I am specifically concerned about the background of the dropdown menu, which it seems to inherit from the parent ul. But I want to create an output where the background is independent of the parent ul. My output comes like this:
Output
Whereas expected output is:
Expected output
I am trying to learn creating CSS dropdowns from the w3schools website.
Code:



.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 Source

You need to take your dropdown div out of the document flow - use 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>