No replies
cidrum
cidrum's picture
Offline
newbie
Last seen: 8 years 32 weeks ago
Timezone: GMT-4
Joined: 2013-04-19
Posts: 1
Points: 2

Trying to replicate this effect with CSS: http://www.awhealth.org/wordpress/
The transparent white flash with white font and then the black transparency with white font in the submenus.

Here is the code I'm working with:

#top_nav {
width:100%;
height:63px;
margin:0px auto 0px;
padding:0px;
text-align:left;
position:relative;
background:none;
z-index: 9;
}
.menu {
margin-left:auto;
margin-right:auto;
display: inline-block;
vertical-align: top;
text-align:center;
cursor:pointer;
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
}
.menu p {
padding:5px;
margin:0px;
line-height:14px;
font-size:13px;
font-family:'lucida grande', tahoma, verdana, arial, sans-serif;
}
.menu a {
color: FFFFFF;
text-decoration:none;
}
.menu h4 {
font-family:'lucida grande', tahoma, verdana, arial, sans-serif;
font-weight: 400;
margin:0px;
padding:0px;
}
#menu1, #menu2, #menu3, #menu4, #menu5, #menu6 {
color: #FFF;
height: 55px;
overflow: hidden;
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
z-index: 2;
}
#menu1 {
width: 75px;
}
.menu:hover {
color: FFFFFF;