HTML menu with CSS hover

Question

I'm working on an HTML menu.

I have a problem with the "L3 submenu" (Item-221, Item-222).

When I "mouse in" to Item-22, L3 is displayed. It's ok.

But I can't click either Item-221 or Item-222. If I "mouse out" Item-22, then L3 disappear.

Is there a solution for this using (only) CCS?

CSS code:

  ul {
    background-color: #c4c4c4;
    list-style-type: none;
    display: flex;
  }
  li {
    padding: 5px 10px 5px 10px;
    white-space: nowrap;
    position: relative;
  }
  li:hover {
    background-color: #02DB02;
  }
  .menu li>ul {
    padding: 10px 13px 10px 13px;
    position: absolute;
    display: none;
    top: calc(100%);
    left: -8px;
  }
  #it_2:hover #ul_2, #it_22:hover #ul_3 {
    display: block;
  }
  .menu>li>ul>li>ul {
    top: -0.5em;
    left: calc(100% + 10px);
  }

HTML code:

<ul class="menu">
  <li>Item-1</li>
  <li id="it_2">Item-2
    <ul id="ul_2">
      <li>Item-21</li>
      <li id="it_22">Item-22
        <ul id="ul_3">
          <li>Item-221</li>
          <li>Item-222</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>Item-3</li>
</ul>

Gurgolo · Accepted Answer · 2022-08-06 12:37:42Z

2

It is better to put padding on the list item so the sub-menu won't disappear

ul {
    background-color: #c4c4c4;
    list-style-type: none;
    display: flex;
  }
  li {
    padding: 5px 10px 5px 10px;
    white-space: nowrap;
    position: relative;
  }
  li:hover {
    background-color: #02DB02;
  }
.menu ul > li  {
  position:relative;
  padding: 0 13px 0 13px;
}
  .menu li>ul {
    padding: 10px 0 10px 0;
    position: absolute;
    display: none;
    top: calc(100%);
    left: -8px;
  }
  #it_2:hover #ul_2, #it_22:hover #ul_3 {
    display: block;
  }
  .menu>li>ul>li>ul {
    position: absolute;
    top: -0.5em;
    left: calc(100%);
    padding: 1em;
  }

<ul class="menu">
  <li>Item-1</li>
  <li id="it_2">Item-2
    <ul id="ul_2">
      <li>Item-21</li>
      <li id="it_22">Item-22
        <ul id="ul_3">
          <li>Item-221</li>
          <li>Item-222</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>Item-3</li>
</ul>

edited Aug 6, 2022 at 12:37

answered Aug 6, 2022 at 12:19

Gurgolo

3323 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

szpal Over a year ago

The goal is for all menu items to have the same padding, and L3 should start exactly at the right edge of L2.

Collectives™ on Stack Overflow

HTML menu with CSS hover

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related