Dropdown Menu Issues

drop down menus won't stay open chrome
drop down menus closes immediately chrome
drop-down list best practices
mobile dropdown ux
drop down menus not working windows 10
drop down menus not working windows 7
steam drop down menus not working
bootstrap dropdown

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>

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>

The problem with dropdown fields (and what you should use instead , dropdown (or “drop-down” if grammar is your thing); dropdown box; dropdown menu; dropdown element; dropdown field; selector; select box; select menu; select  Re: Drop Down Menu Issues It seems the problem is with the navigation bar collapsing. The navigation bar doesn't break when I turn off "Collapse Navigation", however, I want to keep it on.

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>

How to fix dropdown menus not working on website, How do I restore a drop down list in Excel? Follow the below steps and check if it helps: Open the Task manager. Here’s a tip: Press CTRL+Shift+ESC. Click File > Run New Task. Make sure you have a check mark beside “Create this task with administrative privileges”. Type CMD and click on Ok. Type the following 3 commands in the CMD prompt each at a time:

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>

UX Design: Drop-Downs in Forms, How do I create a drop down menu in Chrome? A common UI pattern that we see on the web are dropdown menus. They’re used to display related information in pieces, without overwhelming the user with buttons, text, and options. They’re used to display related information in pieces, without overwhelming the user with buttons, text, and options.

dropdown menus no longer staying down long enough to make a , , menus can be great when used correctly — they conserve screen space and prevent users from entering erroneous data, since they only show legal choices. They come with a lot of nice features, such as grouping options, keyboard navigation and reliable rendering across platforms. When the overflow-y:auto style is applied to a dropdown-menu it experiences issues when displayed in Internet Explorer (testing in v 11.2791.14393.0). The scroll bar cannot be dragged up or down using the mouse, nor will it react to using the scroll buttons (asides from to close the dropdown)

Dropdown menu class not working - HTML/Bootstrap, Also, it is not the mouse issue if Mozilla and Internet Explorer works with the drop down menu. It seems it is just Google Chrome. Hi, I’m having a similar problem, but only in the admin and only with the text editor dropdown menu sur as the Style (paragraphe, h1, h2,…), the font size, actual font and texte color. I use TinyMCE so I disabled, no change, then tried an alternative to that plugin with no difference.

CSS Dropdown Menu Issues - HTML & CSS, Hi, I have got a problem with my dropdown menu that disappeared after I added the Bootstrap library in HTML file. I guess that is causing the  The menu and the favorites open but won't let me scroll down to select. They close before I click on anything. In Favorites I have various folder but can not get them to click on the site I want because the drop down disappears. The same thing happens with the favorites menu bar list that extend beyond the the bar at the top of the browser.

Comments
  • post your code please
  • I've done some edit (add code snippet etc)
  • I'm looking into how to post the code here.
  • OK, thanks for helping!
  • I see drop downs under both menus, not sure what the problem is... Using Chrome
  • This works the way I want it! I have a better understanding now of CSS conflicts and how to separate and use certain functions/behavior. :-) Thanks!
  • I'll remember this solution. I don't know if this solves my CSS conflicts though, because styling is very important. thanks :-)
  • Sure, glad to help :) Just for the record, you can style <select> fields and <option> similar to how you'd style a div. Here's some examples.
  • This gives the same error. I've put the result of your (and mine) code here: w3schools.com/code/tryit.asp?filename=FVNFU45LJJSM
  • Sorry. I m not sure what you want exact. Did you see my attached screen-shot? This is not the result?
  • No problem. I want the exact same thing as the top/first menu. Just different styling and content. In your screenshot the menu drops down horizontally, I want it vertically
  • Hi, Hope I found the issue. We need to remove the <div class="nav2"></div> tag from teh code. I have edited my code. Please take it and check it. Now, the dropdowns are displayed vertically. See this link (w3schools.com/code/tryit.asp?filename=FVNFU45LJJSM)
  • last solution doesn't work either :'( I have found a working solution now: see answer above. Thanks anyway!