CSS dropdown menu - upward

css-dropdown-menu-upward.markdown

CSS dropdown menu - upward

A Pen by Nicolas Galler on CodePen.

License.

index.html

<div style="height: 300px">
<ul class='menu--main'><li>Home</li>
  <li>About</li>
  <li>
    Portfolio
    <ul class='sub-menu'>
      <li>Web Design</li>
      <li>Web Development</li>
      <li>Illustrations</li>
    </ul>
  </li>
  <li>Blog
    <ul class='sub-menu'>
      <li>Articles</li>
      <li>Archive</li>
      <li>What's New</li>
    </ul>
  </li>
  <li>Contact</li>
</ul>
</div>

style.scss

$light-gray:        #f8f9fa;
$menu-bg:           $light-gray;
$menu-hover:        darken($menu-bg, 9%);

.menu--main {
  display: block;
  position: absolute;
  bottom: 0;

  li {
    display: inline-block;
    position: relative;
    cursor: pointer;
    padding: 15px 20px;
    background-color: $menu-bg;
    margin-right: -4px;  // get rid of spacing between list items
    //transition: all 0.2s;

    &:hover {
      background-color: $menu-hover;
    }
    &:hover .sub-menu {      
      max-height: 300px;
      visibility: visible;
      bottom: 100%;  // align to top of parent element
      transition: all 0.4s linear;
    }
  }
  .sub-menu {
    display: block;
    visibility: hidden;
    position: absolute;
    //top: 100%;  // align to bottom of
    left: 0;
    box-shadow: none;
    max-height: 0;
    width: 150px;
    
    overflow: hidden;
    
    li {
      display: block;
    }
  }
}