Troubles with the Drop-down Menu

I'm encountering an issue with displaying two dropdown menus.

The first dropdown menu works fine, but the second one is causing some trouble. When I specify the second dropdown menu, the block doesn't function as expected.

Could there be a conflict in the CSS or HTML code?

How can I troubleshoot this and ensure that the second dropdown menu appears correctly?

    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;
    }
htmlcss

Answer №1

Hey there, check out the revised example below. I have reorganized your CSS code to separate the "dropdown behavior" from the specific styles for each dropdown menu. Your original CSS was conflicting between dropdown menus.

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>

Answer №2

Consider utilizing the select tag instead of trying to use <div> elements and CSS. The select tag is a simple HTML solution that can be styled with CSS if desired, and it is likely to result in fewer bugs.

For 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>

Answer №3

Expect this solution to be beneficial for you.

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

    /*primary 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 primary navigation menu*/

    /*secondary 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-ontent 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Excessive Header Length Exceeding Page Limit

I've been struggling to pinpoint the reason why my page is displaying with a longer header than the actual page length. Even after adjusting the header size to be less than 100%, there is still excess white space overflowing beyond the edge of the pag ...

htmlcss

Setting a uniform width for all columns in a table using ReactJS

When working with variable amounts of data displayed as columns in a table, I struggled to maintain fixed widths for each column. Despite my efforts, the columns would stretch based on available space rather than obeying the specified widths. For example, ...

cssreactjshtml-tableflexboxmaterial-ui

What is the best way to trigger a download of an external image (AWS signed URL) when a button is clicked?

Currently, I am facing a challenge attempting to download an image from an s3 Presigned URL upon clicking a button in Nextjs (client-side). To provide some context: On the backend, I'm utilizing Golang and on the front end, it's the Nextjs Reac ...

htmlreactjsamazon-web-servicesgonext.js

Achieving proper form alignment through Bootstrap

Is there a way to create a form that looks like the one shown in the picture, where regardless of the length of the variable names (Name, Mobile, Gender, Age), all value receiving blocks are the same size and aligned vertically? My initial approach involv ...

jqueryhtmlcsstwitter-bootstrap

The input field will be in a read-only state if it contains a value from the database. However, it will be editable if the value

Hello everyone, I am a newcomer to this community and would greatly appreciate your help. I am encountering an issue with the following lines of code: <input type="text" class="form-control" id="fines" name="fines&quo ...

javascriptphphtmlcss

The navigation bar designed with flex boxes is experiencing an issue where the "Login" button positioned on the right is being partially hidden

My website's navbar has a display: flex property to provide padding around the links, but it is causing some issues with overflow. For more details, you can check the JSfiddle link here: https://jsfiddle.net/Bradley_/3bhroby2/3/ I have noticed that m ...

htmlcssflexboxnavbar

Place three images in the center of a div container

Recently, I've been working on some HTML code that utilizes the Angular Material library: <div layout="row" layout-wrap style="background: yellow; "> <div ng-repeat="pro in Products" > <md-card class="cardProduct" > ...

htmlcssangularjsangularjs-material

Type within a customizable div element located within an iframe

When I switched to using iframe driver.switchTo().frame(driver.findElement(By.xpath("//iframe[@id='ContentFrame']"))); I attempted two different methods, but neither of them worked. Approach 1: WebElement webElement = driver.findElement(locat ...

javahtmliframeselenium-webdriver

Transmitting data for a PHP variable within Wordpress.org

I am a newbie when it comes to PHP programming. Currently, I am working on a WordPress web page where selecting an option from a drop-down menu and clicking a button labeled "Consultar" in a form should display the queried data in a table below. However, ...

phphtmlwordpress

I'm going crazy with Visual Studio 2017 constantly reformatting my code

Out of all the pages I've created, there is one page, and only one page, that always gives me trouble. Every time I save my "Settings.aspx" page in Visual Studio, it decides to play a prank on me and re-format all my code! And no, there is no other de ...

htmlasp.netvisual-studio-2017

Dynamic addition of HTML is not possible in AngularJS

I've encountered a challenging issue that I'm struggling to resolve. Despite my best efforts, I can't seem to find a suitable solution to achieve the desired outcome. Let me provide some context to explain my problem: I need to dynamically ...

javascriptjqueryajaxangularjshtml

The margins on a div element are not displaying correctly

I am currently conducting experiments with a basic fluid grid that consists of a sidebar and a main area. However, I have encountered an issue where setting margins within a div in the main area does not behave as expected, while it works fine within the s ...

htmlcss

Extracting File Names using PHP without the need to UploadDiscover how to

I am looking to provide my users with the option to select multiple files using a "Browse" button. Once they have selected the files, I want to gather just the file names without actually uploading them, and then pass this information to my form action web ...

phpjqueryhtmlfile-upload

Is there a way I can inform iPhone users on my webpage about the existence of an app?

Hey there! I've managed to figure out how to detect the platform being used. It's working well so far: // Extract User-Agent String var UserAgent = navigator.userAgent.toLowerCase(); // Check User-Agent for certain keywords if (UserAgent.search ...

javascripthtmliphoneioscss

Include a border around the list items within two separate columns

I am trying to create 2 columns using li and want to add borders to each of them. However, I'm facing an issue where there are double borders for 2 li. This is the code snippet I have tried: .ul1 { column-count: 2; column-gap: 0px; } .li1 ...

htmlcsscss-selectors

Can links be integrated into Bootstrap 4 nav-pills tab-panel from another webpage?

I've managed to set up a service page with bootstrap 4's pills .nav-pills navigation, and it's functioning quite well. However, my current challenge involves allowing users to click on a link from the home page that will direct them to a spe ...

javascripthtmlcssbootstrap-4

Troubles with the placement of elements in a website due to

I have set up a table using PHP to display data in two columns from an XML feed. The first column appears correctly, but the second column is being cut off. For example, you can see the issue here: http://www.example.com Below is the CSS I am using: td ...

phpcss

How can I move a nested child component out of an ancestor element with overflow set to hidden?

I'm facing an issue with a sliding carousel where the overflow-x property is set to hidden. The carousel displays 4 items at a time, and each item contains a button that triggers a pop-out menu positioned relative to its parent item. The problem arise ...

javascripthtmlcssreactjssass

Does the width of a div with an absolute position rely on the width of its parent element?

Is it possible to have a div with absolute position adjust its width based on its content rather than its parent's width? For example, <div style="position:absolute"> <div style="position:absolute"> <div style="position:absolute"> ...

csshtmlcss-position

HTML: img with center alignment and bootstrap styling

When I expand the screen, the img-thumbnail is not centering. I'm confused about why this happens because I don't fully understand how img-thumbnail works and how to resolve it. I have tried adding classes like "img-thumnail img-responsive center ...

htmlcsstwitter-bootstrap-3centering