How to make CSS Dropdown menu slidedown
17,992
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;
}
This might also be of your interest.
Related videos on Youtube
Author by
Greenhoe
Updated on June 04, 2022Comments
-
Greenhoe almost 2 years
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>
-
Greenhoe almost 10 yearsthanks, 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.
-
Greenhoe almost 10 yearsYea, 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