CSS3 Mega Drop Down Menu Tutorial
And here is an additional demo I worked up showing how to fade in and OUT. It's a bit more complicated and you lose the shadow on the li (otherwise it doesn't look right when trying to hide the li bottom shadow) so I just stuck with the FadeIn one featured below. But of course you're free to play with which ever one you prefer.
The CSS
* {
margin:0;
padding:0;
}
/* ---------- Mega Drop Down --------- */
#mega {
list-style:none;
font-weight:bold;
height:2em;
margin:60px -1px 0 0;
}
#mega li {
background:#999;
border:1px solid #000;
margin-left:-1px;
float:left;
width:150px;
text-align:center;
position:relative;
}
#mega li:hover {
background:#eee;
border-bottom:0; /* border-bottom:0; and padding-bottom:1px; keeps li and div connected */
padding:12px 0 1px 0;
margin-top:-12px;
z-index:1; /* shadow above adjacent li */
box-shadow:0 1px 8px #000;
border-radius:6px 6px 0 0;
}
#mega a {
color:#000;
outline:0;
text-decoration:none;
display:block;
line-height:2em;
}
#mega li:hover a { /* hide top shadow on div */
background:#eee;
padding-bottom:10px;
margin-bottom:-10px;
position:relative;
z-index:1;
}
/* ----------- Hide/Show Div ---------- */
#mega div {
position:absolute;
left:-999em;
margin-top:1px;
width:350px;
padding:0 10px 10px;
border:1px solid #000;
border-top:0;
font-weight:normal;
text-align:left;
background:#eee;
}
#mega li:hover div {
left:-1px;top:auto;
box-shadow:0 2px 8px #000;
border-radius:0 0 6px 6px;
}
#mega li.dif:hover div {
left:-221px;
}
/* -------- CSS3 Transform FadeIn ------- */
@-moz-keyframes fadeIn {0%{opacity:.1;}100%{opacity:1;}}
@-webkit-keyframes fadeIn {0%{opacity:.1;}100%{opacity:1;}}
@-ms-keyframes fadeIn {0%{opacity:.1;}100%{opacity:1;}}
@keyframes fadeIn {0%{opacity:.1;}100%{opacity:1;}}
#mega li:hover {
-moz-animation:fadeIn .75s ease-in-out;
-webkit-animation:fadeIn .75s ease-in-out;
-o-animation:fadeIn .75s ease-in-out;
-ms-animation:fadeIn .75s ease-in-out;
animation:fadeIn .75s ease-in-out;
}
#mega li:hover div {
-moz-animation:fadeIn .5s ease-in-out;
-webkit-animation:fadeIn .5s ease-in-out;
-o-animation:fadeIn .5s ease-in-out;
-ms-animation:fadeIn .5s ease-in-out;
animation:fadeIn .5s ease-in-out;
}
/* --------- Within Div Styles --------- */
#mega div h2 {
background:#999;
font-size:1em;
padding:0 10px;
margin:10px 0 5px 0;
clear:both;
float:left;
width:330px;
}
#mega div p {
float:left;
width:106px;
padding-left:10px;
}
#mega div p a {
text-decoration:underline;
float:left;
clear:left;
line-height:1.4;
}
#mega div a:hover, #mega div a:focus, #mega div a:active {
text-decoration:none;
}
The HTML
<ul id="mega">
<li><a href="#">HOME</a>
<div>
<h2>Classes</h2>
<p><a href="#">Times</a><a href="#">Schedual</a><a href="#">Map</a></p>
<p><a href="#">Names</a><a href="#">Study</a><a href="#">Directions</a></p>
<p><a href="#">Health</a><a href="#">Dance</a><a href="#">Biology</a></p>
<h2>Teachers</h2>
<p><a href="#">Billy</a><a href="#">Madeleine</a><a href="#">Lauren</a></p>
<p><a href="#">Paddington</a><a href="#">Stefan</a><a href="#">Michael</a></p>
<p><a href="#">Shannon</a><a href="#">Mary</a><a href="#">Raffaello</a></p>
<h2>Location</h2>
<p><a href="#">Carlsbad</a><a href="#">Oceanside</a><a href="#">El Cajon</a></p>
<p><a href="#">Vista</a><a href="#">La Costa</a><a href="#">Encinitas</a></p>
<p><a href="#">San Diego</a><a href="#">Los Angles</a><a href="#">Cardiff</a></p>
</div>
</li>
<li><a href="#">ABOUT</a></b>
<div>
<h2>Classes</h2>
<p><a href="#">Times</a><a href="#">Schedual</a><a href="#">Map</a><a href="#">Dance</a></p>
<p><a href="#">Names</a><a href="#">Study</a><a href="#">Directions</a><a href="#">Perform</a></p>
<p><a href="#">Health</a><a href="#">Dance</a><a href="#">Biology</a><a href="#">Math</a></p>
<h2>Teachers</h2>
<p><a href="#">Billy</a><a href="#">Madeleine</a><a href="#">Lauren</a></p>
<p><a href="#">Paddington</a><a href="#">Stefan</a><a href="#">Michael</a></p>
<p><a href="#">Shannon</a><a href="#">Mary</a><a href="#">Raffaello</a></p>
</div>
</li>
<li><a href="#">SCHOOLS</a>
<div>
<h2>Classes</h2>
<p><a href="#">Times</a><a href="#">Schedual</a><a href="#">Map</a></p>
<p><a href="#">Names</a><a href="#">Study</a><a href="#">Directions</a></p>
<p><a href="#">Health</a><a href="#">Dance</a><a href="#">Biology</a></p>
<h2>Teachers</h2>
<p><a href="#">Billy</a><a href="#">Madeleine</a><a href="#">Lauren</a></p>
<p><a href="#">Paddington</a><a href="#">Stefan</a><a href="#">Michael</a></p>
<p><a href="#">Shannon</a><a href="#">Mary</a><a href="#">Raffaello</a></p>
<h2>Location</h2>
<p><a href="#">Carlsbad</a><a href="#">Oceanside</a><a href="#">El Cajon</a></p>
<p><a href="#">Vista</a><a href="#">La Costa</a><a href="#">Encinitas</a></p>
<p><a href="#">San Diego</a><a href="#">Los Angles</a><a href="#">Cardiff</a></p>
<h2>Months</h2>
<p><a href="#">Janary</a><a href="#">February</a><a href="#">March</a><a href="#">April</a></p>
<p><a href="#">May</a><a href="#">June</a><a href="#">July</a><a href="#">August</a></p>
<p><a href="#">September</a><a href="#">October</a><a href="#">November</a><a href="#">December</a></p>
</div>
</li>
<li class="dif"><a href="#">MAP</a>
<div>
<h2>Classes</h2>
<p><a href="#">Times</a><a href="#">Schedual</a><a href="#">Map</a><a href="#">Math</a><a href="#">Cooking</a></p>
<p><a href="#">Names</a><a href="#">Study</a><a href="#">Directions</a><a href="#">Algebra</a><a href="#">Fitness</a></p>
<p><a href="#">Health</a><a href="#">Dance</a><a href="#">Biology</a><a href="#">Training</a><a href="#">Web Design</a></p>
<h2>Teachers</h2>
<p><a href="#">Billy</a><a href="#">Madeleine</a><a href="#">Lauren</a></p>
<p><a href="#">Paddington</a><a href="#">Stefan</a><a href="#">Michael</a></p>
<p><a href="#">Shannon</a><a href="#">Mary</a><a href="#">Raffaello</a></p>
</div>
</li>
<li class="dif"><a href="#">SUPPORT</a>
<div>
<h2>Classes</h2>
<p><a href="#">Times</a><a href="#">Schedual</a></p>
<p><a href="#">Names</a><a href="#">Study</a></p>
<p><a href="#">Health</a><a href="#">Dance</a></p>
<h2>Teachers</h2>
<p><a href="#">Billy</a><a href="#">Madeleine</a><a href="#">Lauren</a><a href="#">Steve</a><a href="#">Mack</a><a href="#">Fred</a></p>
<p><a href="#">Paddington</a><a href="#">Stefan</a><a href="#">Michael</a><a href="#">Lemmon</a><a href="#">Stone</a><a href="#">Bella</a></p>
<p><a href="#">Shannon</a><a href="#">Mary</a><a href="#">Raffaello</a><a href="#">Shannon T</a><a href="#">Sarah</a><a href="#">Ralph</a></p>
</div>
</li>
<li class="dif"><a href="#">CONTACT</a>
<div>
<h2>Classes</h2>
<p><a href="#">Times</a><a href="#">Schedual</a><a href="#">Map</a></p>
<p><a href="#">Names</a><a href="#">Study</a><a href="#">Directions</a></p>
<p><a href="#">Health</a><a href="#">Dance</a><a href="#">Biology</a></p>
<h2>Teachers</h2>
<p><a href="#">Billy</a><a href="#">Madeleine</a><a href="#">Lauren</a><a href="#">Steve</a></p>
<p><a href="#">Paddington</a><a href="#">Stefan</a><a href="#">Michael</a><a href="#">Madeline</a></p>
<p><a href="#">Shannon</a><a href="#">Mary</a><a href="#">Raffaello</a><a href="#">Lorence R</a></p>
<h2>Location</h2>
<p><a href="#">Carlsbad</a><a href="#">Oceanside</a><a href="#">El Cajon</a></p>
<p><a href="#">Vista</a><a href="#">La Costa</a><a href="#">Encinitas</a></p>
<p><a href="#">San Diego</a><a href="#">Los Angles</a><a href="#">Cardiff</a></p>
</div>
</li>
</ul>
