CSS3 slide down menu on hover - html

Question

I want to build a menu that is CSS only. No jQuery.
I've gotten this far but can't make the menu slide in from the top. Here's a fiddle (oddly enough, it doesn't look like my menu... but all the styles are there)
Some code: The HTML:
<div class="menu">
<ul>
<li class="blue"> <a style="text-decoration: none" href="/who-we-are">Who We Are</a>
</li>
<li class="red"> <a style="text-decoration: none" href="/services">Services</a>
<ul>
<li> Post 1
</li>
<li> Post 2
</li>
<li> Post 3
</li>
</ul>
</li>
<li class="orange"><a style="text-decoration: none" href="/packages">Packages</a>
<ul>
<li> Post 1
</li>
<li> Post 2
</li>
<li> Post 3
</li>
</ul>
</li>
<li class="green"><a style="text-decoration: none" href="/contact-us">Contact</a>
</li>
</ul>
</div>
And my CSS:
.menu {
float: left;
margin-top: 0px;
}
.blue, div.item.blue div {
color: #009dc4;
}
.red, div.item.red div {
color: #fe4f00;
}
.orange, div.item.orange div {
color: #ff5958;
}
.green, div.item.green div {
color: #50c402;
}
.menu ul li a {
display: block;
height: 45px;
padding-top: 18px;
}
.menu ul li a:visited {
color: inherit;
}
.menu ul {
list-style: none;
margin: 0;
}
.menu ul li {
display: inline-block;
position: relative;
cursor: pointer;
width: 145px;
font-family: Georgia;
height: 45px;
font-size: 20px;
line-height: 22px;
font-weight: bold;
padding-left: 5px;
margin-top: 0px;
margin-right: 46px;
border-bottom: 5px solid;
z-index: 5000;
}
.menu ul li:hover {
color: #ffffff !important;
}
.menu ul li.blue:hover {
background-color: #009dc4;
border-bottom: 5px solid #009dc4;
}
.menu ul li.red:hover {
background-color: #fe4f00;
border-bottom: 5px solid #fe4f00;
}
.menu ul li.orange:hover {
background-color: #ff5958;
border-bottom: 5px solid #ff5958;
}
.menu ul li.green:hover {
background-color: #50c402;
border-bottom: 5px solid #50c402;
}
.menu ul li ul {
display: none;
opacity: 0;
visibility: hidden;
position: absolute;
top: 45px;
}
.menu ul li ul li {
display: block;
font-size: 12px;
border-bottom: none;
width: 145px;
color: #ffffff;
padding-left: 0px;
height: 34px;
line-height: normal;
position: relative;
left: -5px;
}
.menu ul li ul li a {
font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: normal;
height: auto;
padding: 10px 5px;
font-size: 12px;
background-color: #4fc7c1;
-webkit-transition: all 0.1s;
-moz-transition: all 0.1s;
-ms-transition: all 0.1s;
-o-transition: all 0.1s;
transition: all 0.1s;
}
.menu ul li ul li a:hover {
background: #a3edf5;
}
.menu ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
.menu > ul > li:last-of-type {
margin-right: 0px;
}
If someone can just help with getting the slide down to work, I'd appreciate it.

Answer 1

Unfortunately there is no way to animate height:0 to height:auto with CSS (as of CSS3). However there is a workaround using max-height documented here: http://css3.bradshawenterprises.com/animating_height/
With that logic I have created a simple example from your JS fiddle. All it does is set the css style max-height:0 on the drop-down <ul> element, some transitions for the max-height css attribute and then a large max-height value on menu hover.
Unfortunately the max-height must be hard-coded (cannot be auto) so we are limited here; but if you are confident that your menus will never exceed say 500px then you would simply put 500px.
Here's the fiddle:
http://jsfiddle.net/6ame5wcu/4/

Answer 2

All you need to do is to set max-height:0; and overflow:hidden; then add a transition on it like this:
.menu ul li ul {
max-height:0em;
overflow:hidden;
position: absolute;
top: 45px;
transition:max-height .9s ease
}
on :hover set a max-height ie max-height:600px;
.menu ul li:hover ul {
max-height:600px;
}
DEMO
Full code:
<div class="menu">
<ul>
<li class="blue"> Who We Are
</li>
<li class="red"> Services
<ul>
<li> Post 1
</li>
<li> Post 2
</li>
<li> Post 3
</li>
</ul>
</li>
<li class="orange">Packages
<ul>
<li> Post 1
</li>
<li> Post 2
</li>
<li> Post 3
</li>
</ul>
</li>
<li class="green">Contact
</li>
</ul>
</div>
css
a{text-decoration: none}
.menu {
float: left;
margin-top: 0px;
}
.blue, div.item.blue div {
color: #009dc4;
}
.red, div.item.red div {
color: #fe4f00;
}
.orange, div.item.orange div {
color: #ff5958;
}
.green, div.item.green div {
color: #50c402;
}
.menu ul li a {
display: block;
height: 45px;
padding-top: 18px;
}
.menu ul li a:visited {
color: inherit;
}
.menu ul {
list-style: none;
margin: 0;
}
.menu ul li {
display: inline-block;
position: relative;
cursor: pointer;
width: 145px;
font-family: Georgia;
height: 45px;
font-size: 20px;
line-height: 22px;
font-weight: bold;
padding-left: 5px;
margin-top: 0px;
margin-right: 46px;
border-bottom: 5px solid;
z-index: 5000;
}
.menu ul li:hover {
color: #ffffff !important;
}
.menu ul li.blue:hover {
background-color: #009dc4;
border-bottom: 5px solid #009dc4;
}
.menu ul li.red:hover {
background-color: #fe4f00;
border-bottom: 5px solid #fe4f00;
}
.menu ul li.orange:hover {
background-color: #ff5958;
border-bottom: 5px solid #ff5958;
}
.menu ul li.green:hover {
background-color: #50c402;
border-bottom: 5px solid #50c402;
}
.menu ul li ul {
max-height:0em;
overflow:hidden;
position: absolute;
top: 45px;
transition:max-height .9s ease
}
.menu ul li:hover ul {
max-height:600px;
}
.menu ul li ul li {
display: block;
font-size: 12px;
border-bottom: none;
width: 145px;
color: #ffffff;
padding-left: 0px;
height: 34px;
line-height: normal;
position: relative;
left: -5px;
}
.menu ul li ul li a {
font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: normal;
height: auto;
padding: 10px 5px;
font-size: 12px;
background-color: #4fc7c1;
-webkit-transition: all 0.1s;
-moz-transition: all 0.1s;
-ms-transition: all 0.1s;
-o-transition: all 0.1s;
transition: all 0.1s;
}
.menu ul li ul li a:hover {
background: #a3edf5;
}
.menu > ul > li:last-of-type {
margin-right: 0px;
}