Submenu disappear when moving from menu to submenu - Html

max_c
March 1, 2023
170 views
0 votes
2 Answers

I have the following code, I’m stuck on how to move the mouse from the menu to the submenu (the submenu always disappears when I tried doing so).

I did not use <ul> and <li> in my code and not sure if some little modify can solve this problem… I feel like I did not figure out the relationship between the parent and the child (menu), but I have no clue about how to deal with it. Thanks a lot!

.dropdown .dropbtn {
        border: none;
        outline: none;
        color: #0f4391;
        padding-top: 8.5px;
        padding-right: 15px;
        padding-bottom: 8.5px;
        padding-left: 15px;
        background-color: inherit;
        font-family: inherit;
      }

      .dropdown-content,
      .sub-1 {
        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,
      .sub-1 a {
        float: none;
        color: #0f4391;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        text-align: left;
      }

      .dropbtn:hover {
        background-color: lightgray;
        color: black;
      }

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


      /* To let css detect next element of hovered element to take action */
      .dropdown .dropdown-content a:nth-child(1):hover + .sub-1 {
        background-color: hotpink;
        display: block;
        margin-left: 10em;
        margin-top : -2.5em;
      }

<div class="dropdown" id="myDropdown">
      <!--  -->
      <button class="dropbtn">
        <i style="font-size: 24px" class="fa"></i> level_0
        <i class="fa fa-caret-down"></i>
      </button>
      <!--  -->
      <div class="dropdown-content">
        <!-- Logic : div after element (to be hovered) to detect for action-->
        <a href="#">level_1</a>
        <div class="sub-1">
          <a href="#">level_1-1</a>
          <a href="#">level_1-2</a>
          <a href="#">level_1-3</a>
        </div>
        <!--  -->
        <a href="#">level_2</a>
        <a href="#">level_3</a>
      </div>
    </div>

Based on my code, how to modify CSS to solve the problem (moving from menu to submenu to sub submenu. I just updated my question to make it clear.

Answers

Chosen as BEST ANSWER

Okay, I think I finally solved the problem by figuring out the relationships between parent and child div when hovering. Also, it seems like the part of menu and submenu should be overlapped (at least no gap).

.sub-1:hover, .dropdown .dropdown-content a:nth-child(3):hover +
.sub-1 {
        background-color: inherit;
        display: inherit;
        margin-left: 8em;
        margin-top: -2.5em; }

Here is the updated css and html. Thanks!

#myDropdown {
    display: inline-block;
    vertical-align: -3.3px;
}

.dropdown .dropbtn {
  border: none;
  outline: none;
  color: #0F4391;
  padding-top: 8.5px;
  padding-right: 15px;
  padding-bottom: 8.5px;
  padding-left: 15px;
  background-color: inherit;
  font-family: inherit;
}

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

.sub-1 {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 279px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a, .sub-1 a {
  float: none;
  color: #0F4391;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.w3.my-nav a:hover, .dropdown:hover .dropbtn {
  background-color: lightgray;
  color: black;
}


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

.sub-1:hover, .dropdown .dropdown-content a:nth-child(3):hover + .sub-1 {
        background-color: inherit;
        display: inherit;
        margin-left: 8em;
        margin-top: -2.5em;
}

<div class="dropdown" id="myDropdown">
  <button class="dropbtn">
    Main Menu
  </button>
  <div class="dropdown-content">
    <a href="#">Level1_1</a>
    <a href="#">Level1_2</a>
    <a href="#">Level1_3</a>
    <div class="sub-1" id="sub-1">
      <a href="#">SubLevel1_3-1</a>
      <a href="#">SubLevel1_3-2</a>
    </div>
  </div>
</div>

(Edit)

Ok, the problem is the following, you are showing the submenu only when the parent menu is being hovered and when you move from the parent menu to the submenu, the parent menu is no longer being hovered and the submenu disappears.

try with this CSS

.dropdown .dropbtn {
  /* your styles */
}

.dropdown-content,
.sub-1,
.sub-2 { /* add a new class for the second-level submenu */
  display: none;
  /* your styles */
}

/* show the first-level submenu when parent is being hovered */
.dropdown:hover .dropdown-content {
  display: block;
}

/* show the second-level submenu when either its parent or itself is being hovered */
.sub-1:hover .sub-2,
.sub-2:hover {
  display: block;
}

/* your styles for hover effects, links etc.. */

and modify your HTML div nest with this code:

<div class="dropdown" id="myDropdown">
  <button class="dropbtn">
    <!-- your button content -->
  </button>
  <div class="dropdown-content">
    <a href="#">level_1</a>
    <div class="sub-1">
      <a href="#">level_11</a>
      <div class="sub-2">
        <a href="#">level_111</a>
        <a href="#">level_112</a>
      </div>
      <a href="#">level_12</a>
      <a href="#">level_13</a>
    </div>
    <a href="#">level_1</a>
    <a href="#">level_1</a>
  </div>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.

Submenu disappear when moving from menu to submenu – Html

Answers