I'm really struggling to figure this out! I want the drop-down tabs in my top navigational menu on my website to slide down gracefully when hovered over, rather than just instantly appearing. The effect I'm aiming for is similar to this example:
Here's the CSS code I currently have for my drop-down menu:
nav ul ul {
display: none;
z-index: 9999
}
nav ul li:hover > ul {
display: block;
}
nav ul {
background: #efefef;
background: linear-gradient(top, #D8D8D8 10%, #D0D0D0 90%);
background: -moz-linear-gradient(top, #D8D8D8 10%, #D0D0D0 90%);
background: -webkit-linear-gradient(top, #D8D8D8 10%, #D0D0D0 90%);
box-shadow: 0px 0px 9px 0px rgba(0,0,0,0.15);
padding: 0px 20px;
border-radius: 10px;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: "";
clear: both;
display: block;
}
li {
float: left;
}
nav ul li:hover {
background: #4b545f;
background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -webkit-linear-gradient(top, #4f5964 0%, #5f6975 40%);
}
nav ul li:hover a {
color: #fff;
}
nav ul li a {
display: block;
padding: 10px 40px;
color: #757575;
text-decoration: none;
font-family:arial;
}
nav ul ul {
background: #5f6975;
border-radius: 0px;
padding: 0px;
position: absolute;
top: 100%;
}
nav ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
}
nav ul ul li a {
padding: 10px 40px;
color: #fff;
font-family:arial;
font-weight:900;
}
nav ul ul li a:hover {
background: #4b545f;
}
nav ul ul ul {
position: absolute;
left: 100%;
top:0;
}
This is the HTML code that I insert into my webpages:
<center><nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="">Arcade</a>
<ul>
<li><a href="/arcade/action">Action</a></li>
<li><a href="/arcade/arcade">Arcade</a></li>
<li><a href="/arcade/puzzle">Puzzle</a></li>
<li><a href="/arcade/vehicle">Vehicle</a></li>
<li><a href="/arcade/violence">Violence</a></li>
<li><a href="/arcade/defense">Defense</a></li>
<li><a href="/arcade/rpg">RPG</a></li>
</ul>
</li>
<li><a href="">Watch</a>
<ul>
<li><a href="/watch/tv">TV Shows</a></li>
<li><a href="/watch/movies">Movies</a></li>
</ul>
</li>
<li><a href="">Extras</a>
<ul>
<li><a href="/news">News</a></li>
<li><a href="/updates">Updates</a></li>
</ul>
</li>
<li><a href="/support">Support</a></li>
</ul>
</nav></center>
Do you have any suggestions on how I could accomplish this?
You can visit my website at