Can HTML create a multi-level drop-down menu?

NickolasEtyuhibosecyu
May 16, 2023
784 views
0 votes
2 Answers

I have a drop-down menu as it has been shown here:

.dropdown
{
    display: inline-block;
    position: relative;
}
.dropdown button > a
{
    display: block;
    color: #000000;
    text-decoration: none;
}
.dropdown-content
{
    display: none;
    position: absolute;
    width: auto;
    overflow: auto;
    box-shadow: 0px 10px 10px 0px rgba(0,0,0,0.4);
}
.dropdown:hover .dropdown-content
{
    display: block;
}
.dropdown-content a
{
    display: block;
    color: #000000;
    background-color: #e9e9ed;
    padding: 5px;
    text-decoration: none;
}
.dropdown-content a:hover
{
    color: #FFFFFF;
    background-color: #0080bf;
}

<DIV class="dropdown"><BUTTON>Menu</BUTTON><DIV class="dropdown-content">
    <A href="/1.php">Option 1</A>
    <A href="/2.php">Option 2</A>
    <A href="/3.php">Option 3</A>
    <DIV class="dropdown"><BUTTON><A href="/4.php">Option 4</A></BUTTON><DIV class="dropdown-content">
        <A href="/4-1.php">Option 4-1</A>
        <A href="/4-2.php">Option 4-2</A>
        <A href="/4-3.php">Option 4-3</A>
    </DIV></DIV>
</DIV></DIV>

But the second level of menu doesn’t work (press "Run code snippet" to see). I need it to show to the right of the first level, and the width of each level must be elastic (automatically increase and reduce by content). Also the width of the root button must not be bound to the width of the first level. Ideally there should be universal style for any level, but it is not critical since I don’t have tens of levels. Is there a solution without the rewriting of all the code?

Tags: css html

Answers

function showNestedDropdown() {
          var firstDropdown = document.getElementById("firstDropdown");
          var nestedDropdownContainer = document.getElementById("nestedDropdownContainer");
      
          if (firstDropdown.value !== "") {
            nestedDropdownContainer.style.display = "block";
          } else {
            nestedDropdownContainer.style.display = "none";
          }
        }

    <select id="firstDropdown" onchange="showNestedDropdown()">
        <option value="">Select an option</option>
        <option value="option1">Option 1</option>
        <option value="option2">Option 2</option>
      </select>
      
      <div id="nestedDropdownContainer" style="display: none;">
        <select id="nestedDropdown">
          <option value="">Select a nested option</option>
          <option value="nested1">Nested Option 1</option>
          <option value="nested2">Nested Option 2</option>
        </select>
      </div>

Here is what you can do:

Remove overflow: auto; from .dropdown-content so overflowing sublevels will be visible. Add > selector on .dropdown:hover .dropdown-content line so direct child will be displayed on hover. And the last thing is to add sublevel styling to display it on right top .dropdown-content .dropdown-content { left: 100%; top: 0; }

.dropdown
{
    display: inline-block;
    position: relative;
}
.dropdown-content
{
    display: none;
    position: absolute;
    width: auto;
    box-shadow: 0px 10px 10px 0px rgba(0,0,0,0.4);
    white-space: nowrap;
}
.dropdown:hover > .dropdown-content
{
    display: block;
}
.dropdown-content a
{
    display: block;
    color: #000000;
    background-color: #e9e9ed;
    padding: 5px;
    text-decoration: none;
}
.dropdown-content a:hover
{
    color: #FFFFFF;
    background-color: #0080bf;
}

/* To display second level on right*/
.dropdown-content .dropdown-content {
    left: 100%;
    top: 0;
}

<div class="dropdown">
    <div class="menu">Menu</div>
    <div class="dropdown-content">
      <a href="/1.php">Option 1</a>
      <div class="dropdown">
          <div class="menu">
            <a href="/4.php">Option 4</a>
          </div>
          <div class="dropdown-content">
            <a href="/4-1.php">Option 4-1</a>
            <a href="/4-2.php">Option 4-2</a>
            <a href="/4-3.php">Option 4-3</a>
        </div>
      </div>
    </div>
</div>

P.S. Removed some menu items for better view in "Run code snippet"

Please signup or login to give your own answer.

Click here to cancel reply.