How to make CSS Dropdown menu slidedown

drop down navigation menu html
dropdown menu css
dropdown animation css
vertical dropdown menu
css drop down menu slide effect
responsive drop down menu with submenu
css dropdown on click
css dropdown animation codepen

I created a CSS menu with dropdown and I hide the sub menu and display it when you hover over the menu item and I was wondering if it is possible with CSS with some type of CSS transition to make it instead slide down. You cake take a look at a mock up of the menu here.

#main-nav {
  position: relative;
}

#main-nav>ul>li {
  width: 12.5%;
  float: left;
  text-align: center;
  line-height: .9em;
  font-weight: bold;
  background: #ccc;
}

#main-nav>ul>li>a {
  display: block;
  color: #333;
  line-height: 12px;
  font-size: 14px;
  padding: 22px 0;
  text-decoration: none;
}

.nav-dropdown {
  margin: -5px auto;
  position: absolute;
  left: -999em;
  /* Hides the drop down */
  text-align: left;
  padding: 0;
  border-top: 0;
  width: 500px;
  background: #333;
  color: #f2f2f2;
  border-bottom: 10px solid #25272a;
  -webkit-border-bottom-right-radius: 5px;
  -webkit-border-bottom-left-radius: 5px;
  -moz-border-radius-bottomright: 5px;
  -moz-border-radius-bottomleft: 5px;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
}

#main-nav li:hover .nav-dropdown {
  left: 0;
  top: auto;
  z-index: 11;
}
<div id="main-nav">
  <ul>
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a>
      <!-- Start Blog Drop Down-->
      <div class="nav-dropdown">
        <p>have this item slide down from CSS</p>
      </div>
      <!-- /.nav-dropdown -->
    </li>
  </ul>
</div>

Yes you can, but you need to use the max-height property as described here or you can just use a fixed height as described in the previous answer.

CSS

.nav-dropdown {
    margin: 0 auto;  
    height: 0; /* Hides the drop down */ 
    overflow: hidden;
    text-align:left;  
    padding: 0;  
    border-top: 0;
    width: 500px;
    background:#333;
    color: #f2f2f2;
    -webkit-border-bottom-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    border-bottom: 0;
    max-height:0px;
}

#main-nav li:hover .nav-dropdown {
    height:auto;
    z-index: 11; 
    max-height:200px;
    transition-property: all;
    transition-duration: 1s;
    border-bottom: 10px solid #25272a;
}

http://jsfiddle.net/L8WVP/7/

This might also be of your interest.

Create a Simple Animated Dropdown Menu using Pure CSS Without , How do I create a dropdown menu with submenus in HTML and CSS? Use any element to open the dropdown menu, e.g. a <button>, <a> or <p> element. Use a container element (like <div>) to create the dropdown menu and add the dropdown links inside it. Wrap a <div> element around the button and the <div> to position the dropdown menu correctly with CSS. Step 2) Add CSS:

That should help you. Just give the div tag which should slide in the hight 0 at first and make the css transition.

-webkit-transition: height 0.5s ease-in;
-moz-transition: height 0.5s ease-in;
-o-transition: height 0.5s ease-in;
-ms-transition: height 0.5s ease-in;
transition: height 0.5s ease-in;

Then you add at the hover section the hight of the div.

#main-nav li:hover .nav-dropdown {
    left: 0;
    top: auto;
    z-index: 11; 
    height:200px;
}

And you are done. Hope I helped you.

http://jsfiddle.net/L8WVP/6/

How To Create a Hoverable Dropdown Menu, Example Explained​​ Use any element to open the dropdown menu, e.g. a <button>, <a> or <p> element. Use a container element (like <div>) to create the dropdown menu and add the dropdown links inside it. Wrap a <div> element around the button and the <div> to position the dropdown menu correctly with CSS. Instead of using a border, we have used the box-shadow property to make the dropdown menu look like a "card". We also use z-index to place the dropdown in front of other elements. The :hover selector is used to show the dropdown menu when the user moves the mouse over the dropdown button.

<ul class="navigation">
    <li><a href="#">Home</a></li>
    <li class="menu">
    <a href="#">Services</a>
    <ul class="submenu">
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a></li>
      <li><a href="#">Link 3</a></li>
      <li><a href="#">Link 4</a></li>
    </ul>
  </li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact</a></li>
</ul>

    ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
ul li a {
  text-decoration: none;
  color: #e74c3c;
  font-family: Tahoma, Arial;
}
.navigation {
  background-color: a#e74c3c;
  width: 75%;
  margin: 20px auto;
  min-height: 50px;
}
.navigation > li {
  float: left;
  padding: 0 20px;
}
.navigation > li > a {
  line-height: 50px;
  color: #FFF;
}
.navigation .menu {
  position: relative
}
.navigation .menu .submenu {
  position: absolute;
  width: 200px;
  -webkit-box-shadow: 0px 1px 1px #CCC;
  box-shadow: 0px 1px 1px #CCC;
  display: none;
  -webkit-transition: all .5s ease-in-out;
  -moz-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
}
.navigation .menu:hover .submenu {
  display: block
}
.navigation .menu .submenu:before {
  content: "";
  position: absolute;
  display: block;
  border-width: 0 6px 6px 6px;
  border-style: solid;
  border-color: #FFF transparent;
  top: -6px;
  left: 5px
}
.navigation .menu .submenu li {
  padding: 5px 10px;
  -webkit-transition: all .5s ease-in-out;
  -moz-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
}
.navigation .menu .submenu li:hover {
  background-color: #e74c3c;
}
.navigation .menu .submenu li:hover a {
  color: #FFF;
  padding: 0 11px;
}

How To Create a Side Navigation Dropdown, Centered Menu Link Equal Width Menu Links Fixed Menu Slide Down Bar on Scroll Hide Navbar on Learn how to add a dropdown menu inside a side navigation. Use a container element (like <div>) to create the dropdown menu and add the Tip: Go to our CSS Dropdowns Tutorial to learn more about dropdowns. Pure CSS is more than enough to create incredible web animations. These can range from sliders to carousels and even dropdown navigation menus. But the trickiest part about CSS animation is learning how it all works. In this tutorial I’ll guide you through the process of building a slide-in dropdown navigation menu from very simple code.

CSS3 transitions, We're going to be using CSS3 transitions to make the menus slide down gently, This is a barebones multi-level drop down menu made entirely in CSS, that  CSS Transitions are a nice way to replace jQuery animations with smoother counterparts. Some transitions however, like height and width transitions can be tricky to handle with pure CSS code due to container sizing issues. In this post I show how create create transitions to mimic most of jQuery's slideUp() and slideDown() functions using CSS and small jQuery plug-in.

Slide down css, Another CSS based dropdown menu framework that is clean, standards-friendly, free, easy to use and cross browser framework. When parts of a web page  If you're not sure what I mean by a "slide-down animation," check out the slideDown method from jQuery. This function will take a hidden element and make it visible by increasing the element's

[Solved] How do I slide-down only menu-level=2 on hover menu , slideDown(); }) .mouseleave(function(){ //all css class with drop11 do the //​slidedown dropdown children dropdown-menu when enter and  Make a Website Make a Website (W3.CSS) Make a Website (BS3) Make a Website (BS4) to create the dropdown menu and add the dropdown links inside it. We will use the

Comments
  • Thanks Patrick, if you have the time can you take a look at hearthable.com and you'll see it in actual use but just the background slides in not the actual content.
  • thanks, but if you take a look it in effect with a mega drop down that is dynamic based off wordpress posts I'm having a little issue as the content shows up while it slides in. you can take a look at hearthable.com and see the issue i"m talking about.
  • Yea, that is the issue I'm having where the background is sliding down but the content isn't so it just looks a bit odd