CODEWITHSUNDEEP
htmlcss
Lc0der
Lc0der

Reputation: 25

Dropdown Menu Issues

I want to display two dropdown menu, but I've got some issues with it.

I can't get my second dropdown menu to work properly. The first works fine, but when I specify the second the block doesn't work/changes.

Is there a conflict with the CSS or the HTML ?

How can I handle it, so that the second dropdown menu is shown ?

    body {
    	margin: 0;
        padding: 0
    }

    /*first navigation menu*/
    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);
        z-index: 1;
    }

    .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;
    }
    /*end first navigation menu*/

    /*second navigation menu*/
    .nav2 ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: deepskyblue;
    }

    .nav2 li {
        float: left;
    }

    .nav2 li a, .dropbtn2 {
        display: inline-block;
        color: yellow;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
    }

    .nav2 li a:hover, .dropdown2:hover .dropbtn2 {
        background-color: deeppink;
    }

    li.dropdown2 {
        display: inline-block;
    }

    .dropdown2-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
    }

    .dropdown2-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        text-align: left;
    }

    .dropdown2-content a:hover {background-color: deeppink}

    .dropdown2:hover .dropdown2-content {
        display: block;
    }
  <html>
    <body>
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#news">News</a></li>
      <li class="dropdown">
        <a href="javascript:void(0)" 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>
    </ul>
    &nbsp;
    <div class="nav2">
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#news">News</a></li>
      <li class="dropdown2">
        <a href="javascript:void(0)" class="dropbtn2">Dropdown</a>
        <div class="dropdown2-content">
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
      </li>
    </ul>
    </div>

    <h3>Dropdown Menu inside a Navigation Bar</h3>
    <p>Hover over the "Dropdown" link to see the dropdown menu.</p>

    </body>
    </html>

Upvotes: 1

Views: 86

Answers (3)

Design.Garden
Design.Garden

Reputation: 4207

Okay, take a look at the working example below. All I've done is cleaned up your CSS code by separating "dropdown behavior" from the specific styles per dropdown. Your original CSS for the first dropdown was messing with your CSS for dropdown2.

body {
    	margin: 0;
        padding: 0
    }

    /*dropdown behavior*/
    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #333;
    }

    li {
        float: left;
    }

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

    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);
        z-index: 1;
    }

    .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        text-align: left;
    }

    .dropdown:hover .dropdown-content {
        display: block;
    }
    
    /*end dropdown behavior*/
    
    /*end first navigation menu*/

    /*first navigation menu*/

    li a, .dropbtn1 {
        color: white;
    }

    li a:hover, .dropdown1:hover .dropbtn1 {
        background-color: red;
    }

    li.dropdown1 {
        display: inline-block;
    }

    .dropdown1-content a:hover {background-color: #f1f1f1}

    /*end first navigation menu*/

    /*second navigation menu*/
    
    .nav2 ul {
        background-color: deepskyblue;
    }
    
    .nav2 li a, .dropbtn2 {
      color: yellow;
    }

    .nav2 li a:hover, .dropdown2:hover .dropbtn2 {
      background-color: deeppink;
    }

    .dropdown2-content a:hover {background-color: deeppink}
<html>
    <body>
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#news">News</a></li>
      <li class="dropdown dropdown1">
        <a href="javascript:void(0)" class="dropbtn dropbtn1">Dropdown</a>
        <div class="dropdown-content dropdown1-content">
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
      </li>
    </ul>
    &nbsp;
    <div class="nav2">
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#news">News</a></li>
      <li class="dropdown dropdown2">
        <a href="javascript:void(0)" class="dropbtn dropbtn2">Dropdown</a>
        <div class="dropdown-content dropdown2-content">
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
      </li>
    </ul>
    </div>

    <h3>Dropdown Menu inside a Navigation Bar</h3>
    <p>Hover over the "Dropdown" link to see the dropdown menu.</p>

    </body>
    </html>

Upvotes: 1

jawahar N
jawahar N

Reputation: 482

Hope, this will help you.

<style>
    body {
        margin: 0;
        padding: 0
    }

    /*first navigation menu*/
    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);
        z-index: 1;
    }

    .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;
    }
    /*end first navigation menu*/

    /*second navigation menu*/
    .nav2 ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: deepskyblue;
    }

    .nav2 li {
        float: left;
    }

    .nav2 li a, .dropbtn2 {
        display: inline-block;
        color: yellow;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
    }

    .nav2 li a:hover, .dropdown2:hover .dropbtn2 {
        background-color: deeppink;
    }

    li.dropdown2 {
        display: inline-block;
    }

    .dropdown2-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
    }

    .dropdown2-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        text-align: left;
    }

    .dropdown2-content a:hover {background-color: deeppink}

    .dropdown2:hover .dropdown2-content {
        display: block;
    }
</style>

<html>
    <body>
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#news">News</a></li>
      <li class="dropdown">
        <a href="javascript:void(0)" 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="javascript:void(0)" class="dropbtn">Dropdown2</a>
        <div class="dropdown-content">
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
      </li>
    </ul>
    &nbsp;

    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#news">News</a></li>
      <li class="dropdown2">
        <a href="javascript:void(0)" class="dropbtn2">Dropdown</a>
        <div class="dropdown2-content">
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
      </li>
      <li class="dropdown">
        <a href="javascript:void(0)" class="dropbtn">Dropdown2</a>
        <div class="dropdown-content">
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
      </li>
    </ul>


    <h3>Dropdown Menu inside a Navigation Bar</h3>
    <p>Hover over the "Dropdown" link to see the dropdown menu.</p>

    </body>
</html>

Upvotes: 0

nmg49
nmg49

Reputation: 1386

You may want to take a look at using select tag instead. It's a pure HTML solution (although you can certainly style it with CSS if you'd like) and will probably be less buggy then trying to use <div> elements and CSS.

Example:

<select name="dropdown-1">
  <option value="1">Link 1</option>
  <option value="2">Link 2</option>
  <option value="3">Link 3</option>
</select>

<select name="dropdown-2">
  <option value="1">Link 1</option>
  <option value="2">Link 2</option>
  <option value="3">Link 3</option>
</select>

Upvotes: 0

Related Questions