0

I want to make auto height rows or auto width columns according to the content width or height. I tried the both way. There has always one problem. In grid view, all menu item taking same height even if it does not have any child element and in flex view, menu list are dividing according to items list(Splitting to taking space between of them).

Grid View:

.main-menu {
  display: flex;
  list-style: none;
  width: 1000px;
  padding: 0;
  margin: 0;
  position: relative;
}
.main-menu>li {
  padding: 5px;
}
.main-menu>li:nth-child(n + 2) {
  margin-left: 20px;
}
.main-menu li:hover a {
  color: #f00;
}

.dropdown-menu.main-inner-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 250px;
  display: none;
  grid-template-columns: repeat(5, 1fr);
}
.main-menu li:hover .dropdown-menu.main-inner-menu {
  display: grid;
}

.dropdown-menu.main-inner-menu ul,
.dropdown-menu.main-inner-menu ul li ul{
list-style: none;
padding: 0;
}
.main-menu li a,
.dropdown-menu.main-inner-menu .menu-sub-category a {
  color: #000;
  text-decoration: none;
}
<ul class="main-menu">
  
  <li>
    <a href="#">Main Category</a>
    <ul class="dropdown-menu dropdown-menu-large main-inner-menu">
      <li class="menu-sub-category"><a href="#"><span class="menu-text">Sub Category</span></a></li>
      <li class="menu-sub-category">
          <a href="#"><span class="menu-text">Sub Category</span></a>
          <ul>
              <li><a href="#"><span class="menu-text">Child Category</span></a></li>
              <li><a href="#"><span class="menu-text">Child Category</span></a></li>
              <li><a href="#"><span class="menu-text">Child Category</span></a></li>
              <li><a href="#"><span class="menu-text">Child Category</span></a></li>
          </ul>
      </li>
      <li class="menu-sub-category"><a href="#"><span class="menu-text">Sub Category</span></a></li>
      <li class="menu-sub-category"><a href="#"><span class="menu-text">Sub Category</span></a></li>
      <li class="menu-sub-category">
          <a href="#"><span class="menu-text">Sub Category</span></a>
          <ul>
              <li><a href="#"><span class="menu-text">Child Category</span></a></li>
              <li><a href="#"><span class="menu-text">Child Category</span></a></li>
              <li><a href="#"><span class="menu-text">Child Category</span></a></li>
              <li><a href="#"><span class="menu-text">Child Category</span></a></li>
          </ul>
      </li>
      <li class="menu-sub-category"><a href="#"><span class="menu-text">Sub Category</span></a></li>
      <li class="menu-sub-category"><a href="#"><span class="menu-text">Sub Category</span></a></li>
      <li class="menu-sub-category"><a href="#"><span class="menu-text">Sub Category</span></a></li>
      <li class="menu-sub-category">
          <a href="#"><span class="menu-text">Sub Category</span></a>
          <ul>
              <li><a href="#"><span class="menu-text">Child Category</span></a></li>
              <li><a href="#"><span class="menu-text">Child Category</span></a></li>
              <li><a href="#"><span class="menu-text">Child Category</span></a></li>
              <li><a href="#"><span class="menu-text">Child Category</span></a></li>
          </ul>
      </li>
      <li class="menu-sub-category"><a href="#"><span class="menu-text">Sub Category</span></a></li>
      <li class="menu-sub-category"><a href="#"><span class="menu-text">Sub Category</span></a></li>
  </ul>
  </li>
  <li><a href="#">Main Category 2</a></li>
   <li><a href="#">Main Category 3</a></li>
  
</ul>

Grid Demo View

Flex View:

.main-menu {
  display: flex;
  list-style: none;
  width: 1000px;
  padding: 0;
  margin: 0;
  position: relative;
}
.main-menu>li {
  padding: 5px;
}
.main-menu>li:nth-child(n + 2) {
  margin-left: 20px;
}
.main-menu li:hover a {
  color: #f00;
}

.dropdown-menu.main-inner-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 250px;
  display: none;
  flex-direction: column;
  flex-wrap: wrap;
}
.main-menu li:hover .dropdown-menu.main-inner-menu {
  display: flex;
}

.dropdown-menu.main-inner-menu>li {
  flex: 0 25%;
  width: 16%;
}

.dropdown-menu.main-inner-menu ul,
.dropdown-menu.main-inner-menu ul li ul{
list-style: none;
padding: 0;
}
.main-menu li a,
.dropdown-menu.main-inner-menu .menu-sub-category a {
  color: #000;
  text-decoration: none;
}
<ul class="main-menu">
  
  <li>
    <a href="#">Main Category</a>
    <ul class="dropdown-menu dropdown-menu-large main-inner-menu">
      <li class="menu-sub-category"><a href="#"><span class="menu-text">Sub Category</span></a></li>
      <li class="menu-sub-category">
          <a href="#"><span class="menu-text">Sub Category</span></a>
          <ul>
              <li><a href="#"><span class="menu-text">Child Category</span></a></li>
              <li><a href="#"><span class="menu-text">Child Category</span></a></li>
              <li><a href="#"><span class="menu-text">Child Category</span></a></li>
              <li><a href="#"><span class="menu-text">Child Category</span></a></li>
          </ul>
      </li>
      <li class="menu-sub-category"><a href="#"><span class="menu-text">Sub Category</span></a></li>
      <li class="menu-sub-category"><a href="#"><span class="menu-text">Sub Category</span></a></li>
      <li class="menu-sub-category">
          <a href="#"><span class="menu-text">Sub Category</span></a>
          <ul>
              <li><a href="#"><span class="menu-text">Child Category</span></a></li>
              <li><a href="#"><span class="menu-text">Child Category</span></a></li>
              <li><a href="#"><span class="menu-text">Child Category</span></a></li>
              <li><a href="#"><span class="menu-text">Child Category</span></a></li>
          </ul>
      </li>
      <li class="menu-sub-category"><a href="#"><span class="menu-text">Sub Category</span></a></li>
      <li class="menu-sub-category"><a href="#"><span class="menu-text">Sub Category</span></a></li>
      <li class="menu-sub-category"><a href="#"><span class="menu-text">Sub Category</span></a></li>
      <li class="menu-sub-category">
          <a href="#"><span class="menu-text">Sub Category</span></a>
          <ul>
              <li><a href="#"><span class="menu-text">Child Category</span></a></li>
              <li><a href="#"><span class="menu-text">Child Category</span></a></li>
              <li><a href="#"><span class="menu-text">Child Category</span></a></li>
              <li><a href="#"><span class="menu-text">Child Category</span></a></li>
          </ul>
      </li>
      <li class="menu-sub-category"><a href="#"><span class="menu-text">Sub Category</span></a></li>
      <li class="menu-sub-category"><a href="#"><span class="menu-text">Sub Category</span></a></li>
  </ul>
  </li>
  <li><a href="#">Main Category 2</a></li>
   <li><a href="#">Main Category 3</a></li>
  
</ul>

Flex Demo View

Please have a look and help me!

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Setu
  • 1
  • 2

0 Answers0