How to do drop-right menu with sub-menu?

user_16607067 0
Viewed 110

I wanted to make responsive drop-right menu with sub-menu using html and CSS, tried some variants but I cannot set sub-menu properly.

Here is what I did so far

ul {
  column-count: 4;
  column-gap: 60px;
  column-rule: 1px solid black;
}

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

ul li a {
  text-decoration: none;
  color: red;
}

.sub-menu {
  display: none;
}

ul li:hover .sub-menu {
  display: block;
  position: absolute;
}
<ul>
  <li>
    <a href="">Category > </a>
    <ul class=sub-menu>
      <li>Sub-menu</li>
      <li>Sub-menu</li>
      <li>Sub-menu</li>
    </ul>
  </li>
</ul>

https://jsfiddle.net/yvebudf9/4/

css html
3 Answers

ul {
  
  column-gap: 60px;
  column-rule: 1px solid black;
}

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

ul li a {
  text-decoration: none;
  color: red;
  
}

.sub-menu {
  display:none;
  position: absolute;
  top:0%;
  left:10%;
}

ul li:hover .sub-menu {
  display: block;
  
 
}
<ul>
  <li>
    <a href="">Category > </a>
    <ul class=sub-menu>
      <li>Sub-menu</li>
      <li>Sub-menu</li>
      <li>Sub-menu</li>
    </ul>
  </li>
</ul>

user_160957240

In sub-menu class just add to attribute :

.sub-menu {
  display: none;
  position : absolute;
  top : 0px;
  right: 0px;
 
}

position(absolute) :-

The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor, if any; otherwise, it is placed relative to the initial containing block. Its final position is determined by the values of top, right, bottom, and left.

This value creates a new stacking context when the value of z-index is not auto. The margins of absolutely positioned boxes do not collapse with other margins.

And

Form ul li:hover .sub-menu remove position: absolute;

 ul li:hover .sub-menu {
      display: block; 
    }
user_162997150

If you want everything on the same line you can use something like this.

ul {
  list-style: none;
}

ul li a {
  text-decoration: none;
  color: red;
}

.dropdown{
  display: flex;
  width: min-content;
  white-space: nowrap;
  position: relative;
}

.sub-menu {
  display: none;
  position: absolute;
  top: 0;
  left: 50px;
}

ul li:hover .sub-menu {
  display: flex;
  column-gap: 10px;
}
<ul>
  <li class="dropdown">
    <a href="">Category &gt; </a>
    <ul class="sub-menu">
      <li>Sub-menu</li>
      <li>Sub-menu</li>
      <li>Sub-menu</li>
    </ul>
  </li>
</ul>

user_108407500
Related