HTML & CSS Pick left sidebar submenu's items-CodePudding

Select and click any of the submenus items on this left sidebar, keeping the position of the submenus inside the main menu.

Pure CSS & HTML preferred, JS if required.

I am trying to display and select the items inside the submenus of the main left sidebar menu, when hovering the three-dots at the left of each <li> element.

So at the beginning the button (the three-dots) that displays the submenu is hidden, so when I hover a <li> item, I should display the button. Then, when hovering the button, I'll display the submenu. So I need to keep this submenu displayed while in there, and be able to click any of its items.

aside {
  background-color: gray;
  width: 20%;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  position: relative;
}

li:hover {
  background-color: green;
}

li:hover .other-options {
  display: block;
}

.other-options {
  display: none;
  position: absolute;
  width: 30px;
  top: 0;
  right: 0;
  height: 100%;
}

.other-options:hover .sub-menu {
  display: block;
}

.three-dots {
  position: relative;
}

.sub-menu {
  display: none;
  width: 100px;
  background-color: #b12b2b;
  position: absolute;
  right: 50%;
  top: 15px;
}

<aside>
  <ul>
    <li>
      <span>Example 1</span>
      <div >
        <span >
                            <svg width="3px" height="12px" viewBox="0 0 3 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                                <title>3dots</title>
                                <g id="3dots" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                    <path d="M1.5,9 C2.32842712,9 3,9.67157288 3,10.5 C3,11.3284271 2.32842712,12 1.5,12 C0.671572875,12 0,11.3284271 0,10.5 C0,9.67157288 0.671572875,9 1.5,9 L1.5,9 Z M1.5,4.5 C2.32842712,4.5 3,5.17157288 3,6 C3,6.82842712 2.32842712,7.5 1.5,7.5 C0.671572875,7.5 0,6.82842712 0,6 C0,5.17157288 0.671572875,4.5 1.5,4.5 L1.5,4.5 Z M1.5,0 C2.32842712,0 3,0.671572875 3,1.5 C3,2.32842712 2.32842712,3 1.5,3 C0.671572875,3 0,2.32842712 0,1.5 C0,0.671572875 0.671572875,0 1.5,0 Z" id="Shape-Copy-48" fill="currentColor"></path>
                                </g>
                            </svg>
                        </span>
        <div >
          <span>Option 1</span>
          <span>Option 2</span>
          <span>Option 3</span>
        </div>
      </div>
    </li>
    <li>
      <span>Example 2</span>
      <div >
        <span >
                            <svg width="3px" height="12px" viewBox="0 0 3 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                                <title>3dots</title>
                                <g id="3dots" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                    <path d="M1.5,9 C2.32842712,9 3,9.67157288 3,10.5 C3,11.3284271 2.32842712,12 1.5,12 C0.671572875,12 0,11.3284271 0,10.5 C0,9.67157288 0.671572875,9 1.5,9 L1.5,9 Z M1.5,4.5 C2.32842712,4.5 3,5.17157288 3,6 C3,6.82842712 2.32842712,7.5 1.5,7.5 C0.671572875,7.5 0,6.82842712 0,6 C0,5.17157288 0.671572875,4.5 1.5,4.5 L1.5,4.5 Z M1.5,0 C2.32842712,0 3,0.671572875 3,1.5 C3,2.32842712 2.32842712,3 1.5,3 C0.671572875,3 0,2.32842712 0,1.5 C0,0.671572875 0.671572875,0 1.5,0 Z" id="Shape-Copy-48" fill="currentColor"></path>
                                </g>
                            </svg>
                        </span>
        <div >
          <span>Option 1</span>
          <span>Option 2</span>
          <span>Option 3</span>
        </div>
      </div>
    </li>
    <li>
      <span>Example 3</span>
      <div >
        <span >
                            <svg width="3px" height="12px" viewBox="0 0 3 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                                <title>3dots</title>
                                <g id="3dots" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                    <path d="M1.5,9 C2.32842712,9 3,9.67157288 3,10.5 C3,11.3284271 2.32842712,12 1.5,12 C0.671572875,12 0,11.3284271 0,10.5 C0,9.67157288 0.671572875,9 1.5,9 L1.5,9 Z M1.5,4.5 C2.32842712,4.5 3,5.17157288 3,6 C3,6.82842712 2.32842712,7.5 1.5,7.5 C0.671572875,7.5 0,6.82842712 0,6 C0,5.17157288 0.671572875,4.5 1.5,4.5 L1.5,4.5 Z M1.5,0 C2.32842712,0 3,0.671572875 3,1.5 C3,2.32842712 2.32842712,3 1.5,3 C0.671572875,3 0,2.32842712 0,1.5 C0,0.671572875 0.671572875,0 1.5,0 Z" id="Shape-Copy-48" fill="currentColor"></path>
                                </g>
                            </svg>
                        </span>
        <div >
          <span>Option 1</span>
          <span>Option 2</span>
          <span>Option 3</span>
        </div>
      </div>
    </li>
    <li>
      <span>Example 4</span>
      <div >
        <span >
                            <svg width="3px" height="12px" viewBox="0 0 3 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                                <title>3dots</title>
                                <g id="3dots" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                    <path d="M1.5,9 C2.32842712,9 3,9.67157288 3,10.5 C3,11.3284271 2.32842712,12 1.5,12 C0.671572875,12 0,11.3284271 0,10.5 C0,9.67157288 0.671572875,9 1.5,9 L1.5,9 Z M1.5,4.5 C2.32842712,4.5 3,5.17157288 3,6 C3,6.82842712 2.32842712,7.5 1.5,7.5 C0.671572875,7.5 0,6.82842712 0,6 C0,5.17157288 0.671572875,4.5 1.5,4.5 L1.5,4.5 Z M1.5,0 C2.32842712,0 3,0.671572875 3,1.5 C3,2.32842712 2.32842712,3 1.5,3 C0.671572875,3 0,2.32842712 0,1.5 C0,0.671572875 0.671572875,0 1.5,0 Z" id="Shape-Copy-48" fill="currentColor"></path>
                                </g>
                            </svg>
                        </span>
        <div >
          <span>Option 1</span>
          <span>Option 2</span>
          <span>Option 3</span>
        </div>
      </div>
    </li>
  </ul>
</aside>

CodePudding user response：

A z-index seems to fix your issue, as the submenu was displaying behind the other menus:

.sub-menu {
  z-index: 100;
}

aside {
  background-color: gray;
  width: 20%;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  position: relative;
}

li:hover {
  background-color: green;
}

li:hover .other-options {
  display: block;
}

.other-options {
  display: none;
  position: absolute;
  width: 30px;
  top: 0;
  right: 0;
  height: 100%;
}

.other-options:hover .sub-menu {
  display: block;
}

.three-dots {
  position: relative;
}

.sub-menu {
  display: none;
  z-index: 100;
  width: 100px;
  background-color: #b12b2b;
  position: absolute;
  right: 50%;
  top: 15px;
}

<aside>
  <ul>
    <li>
      <span>Example 1</span>
      <div >
        <span >
                            <svg width="3px" height="12px" viewBox="0 0 3 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                                <title>3dots</title>
                                <g id="3dots" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                    <path d="M1.5,9 C2.32842712,9 3,9.67157288 3,10.5 C3,11.3284271 2.32842712,12 1.5,12 C0.671572875,12 0,11.3284271 0,10.5 C0,9.67157288 0.671572875,9 1.5,9 L1.5,9 Z M1.5,4.5 C2.32842712,4.5 3,5.17157288 3,6 C3,6.82842712 2.32842712,7.5 1.5,7.5 C0.671572875,7.5 0,6.82842712 0,6 C0,5.17157288 0.671572875,4.5 1.5,4.5 L1.5,4.5 Z M1.5,0 C2.32842712,0 3,0.671572875 3,1.5 C3,2.32842712 2.32842712,3 1.5,3 C0.671572875,3 0,2.32842712 0,1.5 C0,0.671572875 0.671572875,0 1.5,0 Z" id="Shape-Copy-48" fill="currentColor"></path>
                                </g>
                            </svg>
                        </span>
        <div >
          <span>Option 1</span>
          <span>Option 2</span>
          <span>Option 3</span>
        </div>
      </div>
    </li>
    <li>
      <span>Example 2</span>
      <div >
        <span >
                            <svg width="3px" height="12px" viewBox="0 0 3 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                                <title>3dots</title>
                                <g id="3dots" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                    <path d="M1.5,9 C2.32842712,9 3,9.67157288 3,10.5 C3,11.3284271 2.32842712,12 1.5,12 C0.671572875,12 0,11.3284271 0,10.5 C0,9.67157288 0.671572875,9 1.5,9 L1.5,9 Z M1.5,4.5 C2.32842712,4.5 3,5.17157288 3,6 C3,6.82842712 2.32842712,7.5 1.5,7.5 C0.671572875,7.5 0,6.82842712 0,6 C0,5.17157288 0.671572875,4.5 1.5,4.5 L1.5,4.5 Z M1.5,0 C2.32842712,0 3,0.671572875 3,1.5 C3,2.32842712 2.32842712,3 1.5,3 C0.671572875,3 0,2.32842712 0,1.5 C0,0.671572875 0.671572875,0 1.5,0 Z" id="Shape-Copy-48" fill="currentColor"></path>
                                </g>
                            </svg>
                        </span>
        <div >
          <span>Option 1</span>
          <span>Option 2</span>
          <span>Option 3</span>
        </div>
      </div>
    </li>
    <li>
      <span>Example 3</span>
      <div >
        <span >
                            <svg width="3px" height="12px" viewBox="0 0 3 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                                <title>3dots</title>
                                <g id="3dots" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                    <path d="M1.5,9 C2.32842712,9 3,9.67157288 3,10.5 C3,11.3284271 2.32842712,12 1.5,12 C0.671572875,12 0,11.3284271 0,10.5 C0,9.67157288 0.671572875,9 1.5,9 L1.5,9 Z M1.5,4.5 C2.32842712,4.5 3,5.17157288 3,6 C3,6.82842712 2.32842712,7.5 1.5,7.5 C0.671572875,7.5 0,6.82842712 0,6 C0,5.17157288 0.671572875,4.5 1.5,4.5 L1.5,4.5 Z M1.5,0 C2.32842712,0 3,0.671572875 3,1.5 C3,2.32842712 2.32842712,3 1.5,3 C0.671572875,3 0,2.32842712 0,1.5 C0,0.671572875 0.671572875,0 1.5,0 Z" id="Shape-Copy-48" fill="currentColor"></path>
                                </g>
                            </svg>
                        </span>
        <div >
          <span>Option 1</span>
          <span>Option 2</span>
          <span>Option 3</span>
        </div>
      </div>
    </li>
    <li>
      <span>Example 4</span>
      <div >
        <span >
                            <svg width="3px" height="12px" viewBox="0 0 3 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                                <title>3dots</title>
                                <g id="3dots" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                    <path d="M1.5,9 C2.32842712,9 3,9.67157288 3,10.5 C3,11.3284271 2.32842712,12 1.5,12 C0.671572875,12 0,11.3284271 0,10.5 C0,9.67157288 0.671572875,9 1.5,9 L1.5,9 Z M1.5,4.5 C2.32842712,4.5 3,5.17157288 3,6 C3,6.82842712 2.32842712,7.5 1.5,7.5 C0.671572875,7.5 0,6.82842712 0,6 C0,5.17157288 0.671572875,4.5 1.5,4.5 L1.5,4.5 Z M1.5,0 C2.32842712,0 3,0.671572875 3,1.5 C3,2.32842712 2.32842712,3 1.5,3 C0.671572875,3 0,2.32842712 0,1.5 C0,0.671572875 0.671572875,0 1.5,0 Z" id="Shape-Copy-48" fill="currentColor"></path>
                                </g>
                            </svg>
                        </span>
        <div >
          <span>Option 1</span>
          <span>Option 2</span>
          <span>Option 3</span>
        </div>
      </div>
    </li>
  </ul>
</aside>