Lantis Lantis - 3 months ago 10
CSS Question

How can I fix this and add multiple dropdown?

i'm very new with coding and I'm trying to learning.
This is my problem. I want to do a top nav bar, but because of contents I need "more than one" dropdown.

I'm learning using the w3school their example is good, I've tried adding other options but, it doesn't respect the CSS. Why?
I can't understand :(

I'm a very very newbie, and I've been searching about that, but maybe my mistake is very little and I don't know "what exactly" I need to searching for. So if already the answer was posted, please sorry

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">Page 2</a></li>

<li class="dropdown">
<a href="#" class="dropbtn">Dropdown</a>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</li>


<li><a href="#"></a>Dropdown 2</li>
<li><a href="#"></a>Dropdown 3</li>
<li><a href="#"></a>Extra</li>
<li><a href="#"></a>Dropdown 4</li>
<li><a href="#"></a>Contact</li>
</ul>

</body>
</html>


And this is the css

ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}

Answer

You have done the main part. Just do the same for any dropDown you want.

I mean, you should add class="dropdown" to the parent

  • Then, add your dropDown div

    ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    }
    li {
    float: left;
    }
    li a, .dropbtn {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    }
    li a:hover, .dropdown:hover .dropbtn {
    background-color: red;
    }
    li.dropdown {
    display: inline-block;
    }
    .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    }
    .dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
    }
    .dropdown-content a:hover {background-color: #f1f1f1}
    .dropdown:hover .dropdown-content {
    display: block;
    }
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#news">Page 2</a></li>
    
      <li class="dropdown">
        <a href="#" class="dropbtn">Dropdown</a>
        <div class="dropdown-content">
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
      </li>
    
    
    <li class="dropdown"><a href="#">Dropdown 2</a>
        <div class="dropdown-content">
          <a href="#">Link 4</a>
          <a href="#">Link 5</a>
          <a href="#">Link 6</a>
        </div>
    </li>
      <li><a href="#"></a>Dropdown 3</li>
      <li><a href="#"></a>Extra</li>
      <li><a href="#"></a>Dropdown 4</li>
      <li><a href="#"></a>Contact</li>
    </ul>

    For example, I changed this:

    <li><a href="#"></a>Dropdown 2</li>
    

    to this:

    <li class="dropdown"><a href="#">Dropdown 2</a>
        <div class="dropdown-content">
          <a href="#">Link 4</a>
          <a href="#">Link 5</a>
          <a href="#">Link 6</a>
        </div>
    </li>