Create on Click Multi Level Dropdown Menu with Pure CSS

Question

I am creating an on click multi level dropdown menu with pure CSS. I found a smart solution from here and it's work like a charm.

<nav>
  <ul>
    <li>
      <a href="#">
        <span class="navtitle">Home</span>
      </a>
    </li>
    <li class="dropdown">
      <a href="#" class="dropdown-toggle">
        <span class="navtitle">More +</span>
      </a>
      <ul class="dropdown-menu">
        <li>
          <a href="#">
            <span class="navtitle">Sub 1</span>
          </a>
        </li>
        <li>
          <a href="#">
            <span class="navtitle">Sub 2</span>
          </a>
        </li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle">
            <span class="navtitle">Sub More +</span>
          </a>
          <ul class="dropdown-menu">
            <li>
              <a href="#">
                <span class="navtitle">Sub 2 1</span>
              </a>
            </li>
            <li>
              <a href="#">
                <span class="navtitle">Sub 2 2</span>
              </a>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</nav>

And my CSS lines are look like this:

*, html {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

ul {
  padding: 0;
  margin: 0;
}

li {
  list-style: none;
  position: relative;
}

a {
  text-decoration: none;
}

nav {
  display: flex;
}

nav a {
  display: block;
  padding: 8px 10px;
}

nav > li {
  margin: 0 6px
}

.dropdown {
  position: relative;
}

.dropdown-menu {
  display: none;
  background-color: #ddd;
  position: absolute;
  top: 100%;
  min-width: 130px;
  left: 0;
  z-index: 100;
}

.dropdown-menu .dropdown-menu {
  left: 100%;
  top: 0;
}

.dropdown .dropdown-toggle:focus + .dropdown-menu,
.dropdown-menu:hover {
  display: block;
}

The problem is I want to keep the second level of submenu (i.e. Sub More +) and soon still opened even though I hover outside submenu area. I know it comes from this css, but how is the trick?

.dropdown-menu:hover { display: block; }

See my jsfiddle. Hope it makes sense.

Mihai T · Accepted Answer · 2019-12-17 08:44:59Z

What happens is that when you click on 'Sub More+' the 'More+' button looses focus so the only reason the dropdown is shown is because the .dropdown-menu:hover style.

You could achieve what you want by changing a little bit the HTML and use the famous 'checkbox hack'

How it works ? Just add a checkbox and a label for that checkbox. Also hide the checkbox.

THen when you click on the label, the checkbox gets :checked and use that status to show your dropdowns. This approach also has it's own limitations but i think it achieves what you want.

Check below:

*,
html {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

ul {
  padding: 0;
  margin: 0;
}

li {
  list-style: none;
  position: relative;
}

a {
  text-decoration: none;
}

nav {
  display: flex;
}

nav a {
  display: block;
  padding: 8px 10px;
}

nav>li {
  margin: 0 6px
}

.dropdown {
  position: relative;
}

.dropdown-menu {
  display: none;
  background-color: #ddd;
  position: absolute;
  top: 100%;
  min-width: 130px;
  left: 0;
  z-index: 100;
}

.dropdown-menu .dropdown-menu {
  left: 100%;
  top: 0;
}

.dropdown .dropdown-toggle:focus {
  color: red;
}

/* .dropdown .dropdown-toggle:focus + .dropdown-menu,
.dropdown-menu:hover {
  display: block;
} */
input[type="checkbox"] {
  display: none
}

input[type="checkbox"]:checked~.dropdown-menu {
  display: block;
}

<nav>
  <ul>
    <li>
      <a href="#">
        <span class="navtitle">Home</span>
      </a>
    </li>
    <li class="dropdown">
      <input type="checkbox" id="more" name="more">
      <label for="more" class="dropdown-toggle">
        More +

      </label>
      <ul class="dropdown-menu">
        <li>
          <a href="#">
            <span class="navtitle">Sub 1</span>
          </a>
        </li>
        <li>
          <a href="#">
            <span class="navtitle">Sub 2</span>
          </a>
        </li>
        <li class="dropdown">
          <input type="checkbox" id="sub-more" name="sub-more">
          <label for="sub-more" class="dropdown-toggle">Sub more+</label>
          <ul class="dropdown-menu">
            <li>
              <a href="#">
                <span class="navtitle">Sub 2 1</span>
              </a>
            </li>
            <li>
              <a href="#">
                <span class="navtitle">Sub 2 2</span>
              </a>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</nav>

Thanks for the snippet. But in my situation, that's not what I want. I made a little bit modification on HTML stucture where I wrapped the <input type="checkbox"> inside a <a href="#" class="dropdown-toggle">......</a> and I'm targeting <ul class="dropdown-menu">. My bad, it's impossible for doing that. Obviously I will take javascript as helper.

Collectives™ on Stack Overflow

Create on Click Multi Level Dropdown Menu with Pure CSS

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related