Having trouble getting a smooth dropdown menu working with css - html

Question

Hi guys I've been having trouble getting my sub menu dropdown working with CSS. I'm trying to add a smooth transition appearance but at the moment the menu doesn't even display when I hover. I'm sure it's something small that I'm missing but I just can't seem to figure it out where the problem is. Here's the code:
#main-navigation ul.folder-child{
opacity: 0;
visibility: hidden;
-moz-transition: height 0.3s ease-in-out;
-ms-transition: height 0.3s ease-in-out;
-o-transition: height 0.3s ease-in-out;
-webkit-transition: height 0.3s ease-in-out;
transition: height 0.3s ease-in-out;
}
#main-navigation li:hover ul.folder-child{
opacity: 1;
visibility: visible;
top: 50px;
}
I'd appreciate any help anyone can offer. Thanks in advance!

Answer 1

You are defining transition for only height and there is no css rule defined for height. here is your solution.
Please Note: for transition of height property, you need to define height on normal and hover states.
ul.folder-child {
width: 180px;
height: 0;
overflow: hidden;
opacity: 0;
visibility: hidden;
position:absolute;
top: 100%;
left: 0;
transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
}
#main-navigation li:hover > ul.folder-child {
height: 100px;
opacity: 1;
visibility: visible;
}
Check out http://jsfiddle.net/logiccanvas/vWDvy/480/

Answer 2

Maybe check your browser,IE does not support all CSS3 functions.

Answer 3

Maybe it is better to use display: none and display: block instead of opacity and visibility;
<ul>
<li>
Item #1
<ul>
<li>Sub-Item #1</li>
<li>Sub-Item #2</li>
<li>Sub-Item #3</li>
</ul>
</li>
<li>
Item #2
<ul>
<li>Sub-Item #4</li>
<li>Sub-Item #5</li>
<li>Sub-Item #6</li>
</ul>
</li>
<li>
Item #3
<ul>
<li>Sub-Item #7</li>
<li>Sub-Item #8</li>
<li>Sub-Item #9</li>
</ul>
</li>
</ul>
ul > li {display: block; float: left; margin-right: 10px; position: relative; background: Red; padding: 0.5em; line-height: 1em}
ul ul {display: none; width: 150px; position:absolute; top: 2em; left: 0}
ul ul > li {float: none;}
ul > li:hover > ul,
ul > a:hover + ul {display: block}
http://jsfiddle.net/spliter/vWDvy/
WORK ON IE ASWELL!