I am creating a basic HTML/CSS3 drop down menu. I'm also trying to use a fading transition effect on the drop downs. An example of the issue I am having is in the screencast video below:
The drop down menu items are set to an opacity of 0 that fades into an opacity of 1. The problem is, when I mouse over an area where they third level menu items are, they appear before mousing over the top level and 2nd level menus first. However, if I try to use display:none and display:block on them to make them appear/disappear then the transition effects don't work. Any ideas? I tried a recommendation of setting the height to 0 then Auto but that didn't seem to work.
Here is the CSS for the menu:
<style type="text/css">
.mymenu {
background-color: #000;
}
.mymenu ul {
position: relative;
float: left;
margin: 0px;
padding: 0px;
width: 100%;
background-color: #CCC;
list-style-type: none;
}
.mymenu ul li {
position: relative;
display: block;
float: left;
margin: 0px;
padding: 0px;
}
.mymenu ul li a {
position: relative;
display: block;
overflow: visible;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
color: #FFF;
text-decoration: none;
font-weight: bold;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
}
.mymenu ul li a:link, .mymenu ul li a:visited {
background-color: #900;
}
.mymenu ul li a:hover, .mymenu ul li a:active {
background-color: #000;
}
.mymenu ul li ul {
position: absolute;
width: auto;
opacity: 0;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.mymenu ul li ul li {
position: relative;
float: none;
}
.mymenu ul li ul li a {
white-space: nowrap;
font-weight: normal;
font-size: 12px;
}
.mymenu ul li ul li a:link, .mymenu ul li ul li a:visited {
background-color: #C00;
}
.mymenu ul li ul li a:hover, .mymenu ul li ul li a:active {
background-color: #000;
}
.mymenu ul li:hover > ul {
opacity: 1;
}
.mymenu ul li ul li:hover {
opacity: 1;
}
.mymenu ul li ul li ul {
position: absolute;
top: 25%;
left: 95%;
z-index: 1;
}
.mymenu ul li ul li ul li a {
font-size: 10px;
}
.mymenu ul li ul li ul li a:link, .mymenu ul li ul li ul li a:visited {
background-color: #F90;
}
.mymenu ul li ul li ul li a:hover, .mymenu ul li ul li ul li a:active {
background-color: #000;
}
</style>