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

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/

CodePudding user response：

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>

CodePudding user response：

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

CodePudding user response：

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>