css3 mega menu drop down - I have FadeIn I need FadeOut

**PicnicTutorials** · Dec 11, 2012 09:07

I'm updating my mega menu. Doing all in CSS. But, as usual there is one last thing I can't seem to figure out. Seen here http://www.visibilityinherit.com/cod...-down-demo.php. I got the fade in part working correctly. However I can't seem to work out a way to also get it to fadeOut. It should be possible. I'm no pro with keyframes. I used them because it was the only way I could figure out how to fade in the pre-existing li. Can you figure this out? Thanks!

**Rayzur** · Dec 11, 2012 11:24

Hi Eric,
Have you tried ease-in-out; ?

As shown here

**PicnicTutorials** · Dec 11, 2012 11:32

Hey Ray. That's what is on there now I believe. Ease-in-out I believe only works on an example like yours were it goes from one width to another or etc. my div that pops up is there on hover and not on exit. So there is nothing to transition as I see it. The li is not going anywhere though so on the same token that should work. In short I don't know

**Rayzur** · Dec 11, 2012 11:50

Ease-in-out I believe only works on an example like yours were it goes from one width to another or etc.

I see you are using animation whereas I was using transition, that may make a difference too, not sure.

Yeah, that fluid height will probably require another approach. I remember using visibility:hidden/visible when I was playing around with transitions a while back, that might be worth a try.

**PicnicTutorials** · Dec 11, 2012 11:52

Ya I tried that already. The reason I used keyframes - thus animation instead of transition is because of the li. I could just do a simple transition with the hidden div but not with the already visible li.

**PicnicTutorials** · Dec 11, 2012 11:58

It's always a troubling sign when my question here on SP is on page one of google while I'm looking for a possible answer.

**flannel jesus** · Dec 11, 2012 12:54

If I may make this slightly off-topic comment: The fade-in is much too slow. Sorry I can't help you with figuring out how to fade-out, but I think this is an issue also worth fixing.

**Rayzur** · Dec 11, 2012 13:45

Hi Eric,

Didn't mean to bail out on you earlier, I had to take care of some other business.

This is what I had in mind by using transition (rather than animation) along with visibility.
It's kinda rough and still needs some work with the li a & h2 bg colors.

Rather than hiding the ap div with left:-999em just let visibilty:hidden take care of it, being that it is AP that will keep it out of the flow.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS3 Mega Drop Down Menu | Demo | { visibility: inherit; }</title>
<style type="text/css">
* {
margin:0; 
padding:0; 
}
html, body {
height:100%;
background:#666;
}
#wrap {
min-height:100%; 
width:905px; 
margin:-1px auto 0;
background:#ccc;
border:1px solid #000;
border-bottom:0;
}
#content h1 {
padding:40px 80px 0;
}
#content h2, #content p, #content a {
padding:15px 80px;
color:#000;
}
/* ---------- 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; moved to #mega li:hover div*/
padding-bottom:10px;
margin-bottom:-10px;
position:relative;
z-index:1;
}
/* ----------- Hide/Show Div ---------- */
#mega  div {
position:absolute;
/*left:-999em;*/
left:-1px;top:auto;
margin-top:1px;
width:350px;
padding:0 10px 10px;
border:1px solid #000;
border-top:0;
font-weight:normal;
text-align:left;
box-shadow:0 2px 8px #000;
border-radius:0 0 6px 6px;
}

#mega li.dif div { /*removed :hover here*/
left:-221px;
}
#mega li div {
-moz-transition: all .65s ease-in-out;
-webkit-transition: all .65s ease-in-out;
-o-transition: all .65s ease-in-out;
-ms-transition: all .65s ease-in-out;
transition: all .65s ease-in-out;
visibility:hidden;
background-color:transparent;
}
/* -------- CSS3 Transform FadeIn ------- */
#mega li:hover div {
visibility:visible;
background-color:#eee;
}
/* --------- 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;
position:relative; /* makes above drop shadow */
}
#mega div p {
float:left;
width:106px;
padding-left:10px;
position:relative; /* makes above drop shadow */
}
#mega div p a {
text-decoration:underline;
float:left;
clear:left;
width:100%; /* For IE6/7 */
line-height:1.4;
}
#mega div a:hover, #mega div a:focus, #mega div a:active {
text-decoration:none;
}
</style> 
</head>
<body>

<div id="wrap">
<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>
<div id="content">
<h1>CSS3 Mega Drop Down Menu Demo</h1>
<h2>CSS3, No Images, No JS, Graceful Degradation in IE8/less</h2>
<h3><a href="css3-mega-drop-down.php">&laquo; Back To Tutorial</a></h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque tempor. Nam in libero vel nisi accumsan euismod. Quisque quis neque. Donec condimentum, enim convallis vestibulum varius, quam mi accumsan diam, sollicitudin ultricies odio ante vitae purus. Etiam ultricies quam. Vestibulum turpis turpis, fermentum ut, accumsan quis, tempor at, ipsum. Nam felis elit, sollicitudin id, ultrices faucibus, fringilla vel, dui. Aliquam tincidunt iaculis eros. Sed in lorem. Nullam eu enim. Quisque tristique pretium diam. Fusce tempor sollicitudin ligula. Donec purus eros, mattis quis, mattis vestibulum, congue quis, felis. Nulla facilisi. Nam ultricies posuere justo. In feugiat. Ut lacus neque, interdum in, nonummy ac, placerat a, lorem. In interdum vulputate lectus. Aenean libero elit, eleifend id, tincidunt id, tristique eu, tortor. Pellentesque urna dolor, placerat a, pharetra eget, congue ut, ligula. Sed mi. Nunc volutpat. Donec pharetra accumsan lacus. Integer pede orci, vehicula vitae, porttitor id, pulvinar vel, nisi. Aliquam mauris ligula, eleifend sit amet, eleifend sit amet, luctus at, turpis. Sed neque orci, tincidunt id, tempus condimentum, eleifend a, nisl. Etiam auctor. Donec lectus lacus, consequat ac, ultrices venenatis, imperdiet vel, erat. In porttitor augue at tellus commodo pharetra. Sed non nibh. Sed sapien ipsum, fringilla condimentum, consectetuer vitae, convallis eu, urna. Aenean id elit eu nulla aliquet congue. Sed fringilla nonummy nisi. Donec aliquet. Quisque varius. Vivamus ut nulla. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer lacinia. In leo nulla, molestie ac, dignissim sed, pulvinar at, odio. Duis sit amet augue. Sed neque orci, tincidunt id, tempus condimentum, eleifend a, nisl. Etiam auctor. Donec lectus lacus, consequat ac, ultrices venenatis, imperdiet vel, erat. In porttitor augue at tellus commodo pharetra. Sed non nibh. Sed sapien ipsum, fringilla condimentum, consectetuer vitae, convallis eu, urna. Aenean id elit eu nulla aliquet congue. Sed fringilla nonummy nisi. Donec aliquet. Quisque varius. Vivamus ut nulla. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer lacinia. In leo nulla, molestie ac, dignissim sed, pulvinar at, odio. Duis sit amet augue consequat ac, ultrices venenatis nulla.</p>
</div>
</div>

</body>
</html>

**PicnicTutorials** · Dec 11, 2012 14:17

Thanks Ray. Yes that's what I had in mind if it were not for the li. I need the li to fadeIn and FadeOut along with the hidden div. Thats part of the delima I'm afraid. However, you were able to show that it can be done with the div so it gives promise. The only problem is the li can't simply fade out as it needs to remain visible. That's what led me to the keyframe as a possible answer and it worked. So I was happy for about 5 minute until I realized that now that I had my cake I wanted to eat it to and fadeout. I'm sure there is some way. I have the li, a. and div to work with as hooks. It will probably need a little outside the box thinking.

**PicnicTutorials** · Dec 11, 2012 14:24

Like maybe as a last ditch effort I could stick a "b" in the div - AP directly behind the li - with the exact same styling as the li - when the li pops back into normal state the "b" will still be sitting there fading out along with the div - with the anchor text showing through as it fades out. That could work. I would however like to do it cleaner than that. But if now one shows a solution ill try that. Because that's the only idea I have. A little mix of old school css with new school css3. That's if it works. I may of just made that up in my head just now.

**PicnicTutorials** · Dec 11, 2012 15:37

Ok here is proof of concept. Working off what Ray posted. Then I shoved in the "b". Hover over the "HOME" link and you can see the li fades in/out with the div. it's rough and lots of things to fix but it seems to work that way. It's seems a little messy though in the css. Doesn't make as much sense to me. Maybe I'll run with it maybe not. But that's one way to do it.

Code CSS:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS3 Mega Drop Down Menu | Demo | { visibility: inherit; }</title>
<style type="text/css">
* {
margin:0; 
padding:0; 
}
html, body {
height:100%;
background:#666;
}
#wrap {
min-height:100%; 
width:905px; 
margin:-1px auto 0;
background:#ccc;
border:1px solid #000;
border-bottom:0;
}
#content h1 {
padding:40px 80px 0;
}
#content h2, #content p, #content a {
padding:15px 80px;
color:#000;
}
/* ---------- 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;
z-index:1;
}
#mega li:hover {
border-bottom:0; /* border-bottom:0; and padding-bottom:1px; keeps <li> and <div> connected */
padding:12px 0 1px 0;
margin-top:-12px;
border-radius:6px 6px 0 0;
box-shadow:0 1px 8px #000;
z-index: 2;
}
#mega div b {
position:absolute;
top: -2em;
height:1.45em;
left: 0;
width: 150px;
background:#eee;
border-bottom:0; /* border-bottom:0; and padding-bottom:1px; keeps <li> and <div> connected */
padding:12px 0 10px 0;
margin-top:-12px;
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; moved to #mega li:hover div*/
position:relative;
z-index:3;
}
/* ----------- Hide/Show Div ---------- */
#mega  div {
position:absolute;
/*left:-999em;*/
left:-1px;top:auto;
margin-top:1px;
width:350px;
padding:0 10px 10px;
border:1px solid #000;
border-top:0;
font-weight:normal;
text-align:left;
box-shadow:0 2px 8px #000;
border-radius:0 0 6px 6px;
}
 
#mega li.dif div { /*removed :hover here*/
left:-221px;
}
#mega li div {
-moz-transition: all .65s ease-in-out;
-webkit-transition: all .65s ease-in-out;
-o-transition: all .65s ease-in-out;
-ms-transition: all .65s ease-in-out;
transition: all .65s ease-in-out;
visibility:hidden;
background-color:transparent;
opacity:0;
}
/* -------- CSS3 Transform FadeIn ------- */
#mega li:hover div {
visibility:visible;
background-color:#eee;
opacity:1;
}
/* --------- 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;
position:relative; /* makes above drop shadow */
}
#mega div p {
float:left;
width:106px;
padding-left:10px;
position:relative; /* makes above drop shadow */
}
#mega div p a {
text-decoration:underline;
float:left;
clear:left;
width:100%; /* For IE6/7 */
line-height:1.4;
}
#mega div a:hover, #mega div a:focus, #mega div a:active {
text-decoration:none;
}
</style> 
</head>
<body>
 
<div id="wrap">
<ul id="mega">
    <li><a href="http://google.com">HOME</a>
      <div><b></b>
        <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>
<div id="content">
<h1>CSS3 Mega Drop Down Menu Demo</h1>
<h2>CSS3, No Images, No JS, Graceful Degradation in IE8/less</h2>
<h3><a href="css3-mega-drop-down.php">&laquo; Back To Tutorial</a></h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque tempor. Nam in libero vel nisi accumsan euismod. Quisque quis neque. Donec condimentum, enim convallis vestibulum varius, quam mi accumsan diam, sollicitudin ultricies odio ante vitae purus. Etiam ultricies quam. Vestibulum turpis turpis, fermentum ut, accumsan quis, tempor at, ipsum. Nam felis elit, sollicitudin id, ultrices faucibus, fringilla vel, dui. Aliquam tincidunt iaculis eros. Sed in lorem. Nullam eu enim. Quisque tristique pretium diam. Fusce tempor sollicitudin ligula. Donec purus eros, mattis quis, mattis vestibulum, congue quis, felis. Nulla facilisi. Nam ultricies posuere justo. In feugiat. Ut lacus neque, interdum in, nonummy ac, placerat a, lorem. In interdum vulputate lectus. Aenean libero elit, eleifend id, tincidunt id, tristique eu, tortor. Pellentesque urna dolor, placerat a, pharetra eget, congue ut, ligula. Sed mi. Nunc volutpat. Donec pharetra accumsan lacus. Integer pede orci, vehicula vitae, porttitor id, pulvinar vel, nisi. Aliquam mauris ligula, eleifend sit amet, eleifend sit amet, luctus at, turpis. Sed neque orci, tincidunt id, tempus condimentum, eleifend a, nisl. Etiam auctor. Donec lectus lacus, consequat ac, ultrices venenatis, imperdiet vel, erat. In porttitor augue at tellus commodo pharetra. Sed non nibh. Sed sapien ipsum, fringilla condimentum, consectetuer vitae, convallis eu, urna. Aenean id elit eu nulla aliquet congue. Sed fringilla nonummy nisi. Donec aliquet. Quisque varius. Vivamus ut nulla. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer lacinia. In leo nulla, molestie ac, dignissim sed, pulvinar at, odio. Duis sit amet augue. Sed neque orci, tincidunt id, tempus condimentum, eleifend a, nisl. Etiam auctor. Donec lectus lacus, consequat ac, ultrices venenatis, imperdiet vel, erat. In porttitor augue at tellus commodo pharetra. Sed non nibh. Sed sapien ipsum, fringilla condimentum, consectetuer vitae, convallis eu, urna. Aenean id elit eu nulla aliquet congue. Sed fringilla nonummy nisi. Donec aliquet. Quisque varius. Vivamus ut nulla. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer lacinia. In leo nulla, molestie ac, dignissim sed, pulvinar at, odio. Duis sit amet augue consequat ac, ultrices venenatis nulla.</p>
</div>
</div>
 
</body>
</html>

**PicnicTutorials** · Dec 11, 2012 19:58

Here it is in action. Fadeout currently only ugglily works on the Home link. http://www.visibilityinherit.com/projects/FadeOut.html

Ray if you can figure out how to hide that bottom shadow on the b or li that would be great. I messed with it for about an hour and temporarily gave up.

**ronpat** · Dec 11, 2012 20:12

Sorry guys, I tried something that turned out to be really wrong. Deleted it.

**Rayzur** · Dec 11, 2012 23:14

Eric, it looks like you need to adjust your box shadow a little bit.

This helps hide the bottom shadow but it's not perfect.

Code:

#mega li:hover {
border-bottom:0; /* border-bottom:0; and padding-bottom:1px; keeps <li> and <div> connected */
padding:12px 0 1px 0;
margin-top:-12px;
border-radius:6px 6px 0 0;
box-shadow:0 -2px 4px #000;
z-index: 2;
}

**unaisc** · Dec 12, 2012 01:43

i had this similar problem with mega menu.. any way i have correct it.. Thanks all l

My blog: <snip></snip>

**PicnicTutorials** · Dec 18, 2012 07:55

Originally Posted by unaisc

i had this similar problem with mega menu.. any way i have correct it.. Thanks all l

My blog: <snip></snip>

Ray posted how to fade both ways above. Here is how I did fade in. http://www.visibilityinherit.com/cod...-down-demo.php. I'll prob just use the fade in as it is cleaner on the css

User Tag List

Thread: css3 mega menu drop down - I have FadeIn I need FadeOut

Thread Tools

Display

css3 mega menu drop down - I have FadeIn I need FadeOut

Bookmarks

Bookmarks

Posting Permissions