How to make CSS Dropdown menu slidedown - html

Question

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>Item 1</li>
<li>Item 2</li>
<li>Item 3
<!-- Start Blog Drop Down-->
<div class="nav-dropdown">
<p>have this item slide down from CSS</p>
</div>
<!-- /.nav-dropdown -->
</li>
</ul>
</div>

Answer 1

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.

Answer 2

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/

Answer 3

<ul class="navigation">
<li>Home</li>
<li class="menu">
Services
<ul class="submenu">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</li>
<li>About</li>
<li>Contact</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;
}