CODEWITHSUNDEEP
htmlcss
mirodil
mirodil

Reputation: 439

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

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/

Upvotes: 2

Views: 355

Answers (2)

KJEK-Code
KJEK-Code

Reputation: 705

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>

Upvotes: 0

Arezou Saremian
Arezou Saremian

Reputation: 508

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>

Upvotes: 2

Related Questions