CODEWITHSUNDEEP
htmlcssflexbox
Maihan Nijat
Maihan Nijat

Reputation: 9355

How to push down main menu while expanding nested menu using Flex CSS?

I have two level menu (main and nested). The menu appears as Flex column on small screen size but when I hover on the main menu the sub menu appears top of the main menu. How can I push down the main menu to make require room for sub menu while expanding?

#main-menu ul {
    display: flex;
    flex-direction: row;
    background-color: #F2F3F4;
    padding: 0;
}
#main-menu ul li {
    position: relative;
    flex: 1 0 auto;
    text-align: left;
}
#main-menu li ul {
    display: none;
    width: 100%;
    position: absolute;
}
#main-menu ul ul {
    left: 0;
    top: 10;
}
#main-menu ul li:hover ul,
#main-menu li ul li:hover ul {
    display: flex;
    flex-direction: column;
}
#main-menu ul a {
    display: block;
    padding: 10px;
}
#main-menu ul a:hover {
    background-color: #B2BABB;
}
@media only screen and (max-width: 768px) {
    #main-menu ul {
        flex-direction: column;
    }
}
<nav id="main-menu">
<ul>
    <li><a href="#">Item 1</a>
        <ul id="sub-menu">
            <li><a href="#">Item 1.1</a></li>
            <li><a href="#">Item 1.2</a></li>
            <li><a href="#">Item 1.3</a></li>
        </ul>
    </li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
    <li><a href="#">Item 4</a></li>
</ul>
</nav>

Upvotes: 1

Views: 87

Answers (2)

Asons
Asons

Reputation: 87303

That overlap is caused by the inner ul being set to position: absolute, which simply mean, the ul is taken out of flow and doesn't affect any other elements.

#main-menu li ul {
    display: none;
    width: 100%;
    position: absolute;              /*  this needs to be changed  */
}

Simply add a new rule in the media query, that override the previous setting on smaller screens

@media only screen and (max-width: 768px) {
    #main-menu ul {
        flex-direction: column;
    }
    #main-menu li ul {                         /*  added  */
        position: relative;
    }
}

Stack snippet

#main-menu ul {
    display: flex;
    flex-direction: row;
    background-color: #F2F3F4;
    padding: 0;
}
#main-menu ul li {
    position: relative;
    flex: 1 0 auto;
    text-align: left;
}
#main-menu li ul {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
}
#main-menu ul li:hover ul,
#main-menu li ul li:hover ul {
    display: flex;
    flex-direction: column;
}
#main-menu ul a {
    display: block;
    padding: 10px;
}
#main-menu ul a:hover {
    background-color: #B2BABB;
}
@media only screen and (max-width: 768px) {
    #main-menu ul {
        flex-direction: column;
    }
    #main-menu li ul {
        position: relative;
    }
}
<nav id="main-menu">
<ul>
    <li><a href="#">Item 1</a>
        <ul id="sub-menu">
            <li><a href="#">Item 1.1</a></li>
            <li><a href="#">Item 1.2</a></li>
            <li><a href="#">Item 1.3</a></li>
        </ul>
    </li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
    <li><a href="#">Item 4</a></li>
</ul>
</nav>

You also had these 2 rules,

#main-menu li ul {
    display: none;
    width: 100%;
    position: absolute;
}
#main-menu ul ul {
    left: 0;
    top: 10;                   /*  invalid value, needs a unit (if not a "0")  */
}

which I merged into 1 and corrected the top: 10 property/value.

#main-menu li ul {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;                 /*  changed so it start at the bottom of its parent  */
    width: 100%;
}

Upvotes: 2

Vadim Ovchinnikov
Vadim Ovchinnikov

Reputation: 14022

You can add position: static for you submenu:

#main-menu ul {
  display: flex;
  flex-direction: row;
  background-color: #F2F3F4;
  padding: 0;
}

#main-menu ul li {
  position: relative;
  flex: 1 0 auto;
  text-align: left;
}

#main-menu li ul {
  display: none;
  width: 100%;
  position: absolute;
}

#main-menu ul ul {
  left: 0;
  top: 10;
}

#main-menu ul li:hover ul,
#main-menu li ul li:hover ul {
  display: flex;
  flex-direction: column;
}

#main-menu ul a {
  display: block;
  padding: 10px;
}

#main-menu ul a:hover {
  background-color: #B2BABB;
}

@media only screen and (max-width: 768px) {
  #main-menu ul {
    flex-direction: column;
  }
  
  /* new */
  #main-menu ul ul {
    position: static;
  }
}
<nav id="main-menu">
  <ul>
    <li><a href="#">Item 1</a>
      <ul id="sub-menu">
        <li><a href="#">Item 1.1</a></li>
        <li><a href="#">Item 1.2</a></li>
        <li><a href="#">Item 1.3</a></li>
      </ul>
    </li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
    <li><a href="#">Item 4</a></li>
  </ul>
</nav>

Upvotes: 1

Related Questions