Slider covering mega drop down menu - html

Question

If you could kindly hover your mouse over the MORE button in the menu here:
http://jsfiddle.net/H8FVE/3/
You will notice that the big wide picture underneath (#featured) is covering the drop down div. Why and how can I fix it?
Here is part of my HTML code:
<div id="second-menu" class="clearfix">
<ul id="secondary-menu" class="nav sf-js-enabled">
<li class="manimation">Animation</li>
</ul>
<ul id="mega">
<li class="dif mmore" style="background:none;">More...
<div>
<ticman>
<ul>
<li class="mgames">Games</li>
<li class="mliterature">Literature</li>
<li class="marts">Arts</li>
<li class="mcontact" style="background:none;">Contact</li>
</ul>
</ticman>
<h2>Classes</h2>
<p>TimesSchedualMap</p>
<p>NamesStudyDirections</p>
<p>HealthDanceBiology</p>
<h2>Teachers</h2>
<p>BillyMadeleineLaurenSteve</p>
<p>PaddingtonStefanMichaelMadeline</p>
<p>ShannonMaryRaffaelloLorence R</p>
<h2>Location</h2>
<p>CarlsbadOceansideEl Cajon</p>
<p>VistaLa CostaEncinitas</p>
<p>San DiegoLos AnglesCardiff</p>
</div>
</li>
</ul>
</div> <!-- end #second-menu -->
<div class="et_cycle" id="featured">
Previous
Next
<div id="slides" style="position: relative; background-image: none;">
<div class="slide" style="position: absolute; top: 0px; left: 0px; z-index: 3; opacity: 1; display: block;">
<img width="958px" height="340px" alt="10 moments in cinematic history changing faith" src="http://ftframes.com/delheat/wordpress/wp-content/uploads/et_temp/ip-man-donnie-yen-756651_958x340.jpg"> <div class="featured-top-shadow"></div>
<div class="featured-bottom-shadow"></div>
<div class="featured-description">
<div class="feat_desc">
<p class="meta-info">Posted by <a rel="author" title="Posts by admin" href="http://ftframes.com/delheat/wordpress/?author=1">admin</a> on Aug 9, 2012</p>
<h2 class="featured-title">Some random text here</h2>
<p>Well, I like this trailer a bit better than Chasing Mavericks’. Well for one, Gerry gets to keep his Scottish brogue, wahoo! Plus, I kind of like seeing him with kids. I mean the last time he played dad to a little boy was in the wonderful indie Dear Frankie, and he’s definitely a natural with them. Then there’s the supporting cast: Catherine Zeta-Jones, Jessica Biel, Uma Thurman, Dennis Quaid and...</p>
</div>
<a class="readmore" href="http://ftframes.com/delheat/wordpress/?p=43">Read More</a>
</div> <!-- end .description -->
</div> <!-- end .slide -->
<div class="slide" style="position: absolute; top: 0px; left: 0px; display: none; z-index: 2; opacity: 0;">
<img width="958px" height="340px" alt="More experimental testings" src="http://ftframes.com/delheat/wordpress/wp-content/uploads/2012/07/vlcsnap-2012-05-13-22h37m19s79-300x129.png"> <div class="featured-top-shadow"></div>
<div class="featured-bottom-shadow"></div>
<div class="featured-description">
<div class="feat_desc">
<p class="meta-info">Posted by <a rel="author" title="Posts by admin" href="http://ftframes.com/delheat/wordpress/?author=1">admin</a> on Jul 30, 2012</p>
<h2 class="featured-title">More experimental testings</h2>
<p>Lets see how this one turns out… Lets see how this one turLets see how this one turLets see how this one turLets see how this one turLets see how this one turLets see how this one turLets see how this one turLets see how this one tur
Lets see how this one turLets see how this one turLets see how this one turLets see how this one turLets see how this one turLets see how this one turLets see how...</p>
</div>
<a class="readmore" href="http://ftframes.com/delheat/wordpress/?p=10">Read More</a>
</div> <!-- end .description -->
</div> <!-- end .slide -->
<div class="slide" style="position: absolute; top: 0px; left: 0px; display: none; z-index: 1; opacity: 0;">
<img width="958px" height="340px" alt="Testing this theme with image" src="http://ftframes.com/delheat/wordpress/wp-content/uploads/et_temp/251932_10151043115229294_310983318_n-39277_635x340.jpg"> <div class="featured-top-shadow"></div>
<div class="featured-bottom-shadow"></div>
<div class="featured-description">
<div class="feat_desc">
<p class="meta-info">Posted by <a rel="author" title="Posts by admin" href="http://ftframes.com/delheat/wordpress/?author=1">admin</a> on Jul 30, 2012</p>
<h2 class="featured-title">Testing this theme with image</h2>
<p>And this is how it looks, very interesting indeed.And this is how it looks, very interesting indeed.And this is how it looks, very interesting indeed.And this is how it looks, very interesting indeed.And this is how it looks, very interesting indeed.And this is how it looks, very interesting indeed.And this is how it looks, very interesting indeed.And this is how it looks, very interesting...</p>
</div>
<a class="readmore" href="http://ftframes.com/delheat/wordpress/?p=6">Read More</a>
</div> <!-- end .description -->
</div> <!-- end .slide -->
</div> <!-- end #slides -->
</div> <!-- end #featured -->
And here is part of my CSS:
ul#secondary-menu li { background: url(images/secondary-menu-bg.png) repeat-y top right; }
ul#secondary-menu a { font-size: 16px; color: #48423f; text-decoration: none; text-transform: uppercase; font-weight: bold; padding: 22px 16px; }
ul#secondary-menu a:hover { color: #ffffff; text-shadow: 1px 1px 0 #404747; }
#second-menu ul.nav li:hover a {color: #ffffff; text-shadow: 1px 1px 0 #404747; }
ul#secondary-menu > li.current_page_item > a { color: #919e9e !important; }
ul#secondary-menu li ul, #category_mobile_menu { width: 360px !important; padding: 7px 0 10px; background: #fff url(images/content-bg.png); top: 55px !important; -moz-box-shadow:3px 3px 7px 1px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 3px 3px 7px 1px rgba(0, 0, 0, 0.1); box-shadow: 3px 3px 7px 1px rgba(0, 0, 0, 0.1); -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; border-top-left-radius: 0px;-moz-border-radius-topleft: 0px; border-top-right-radius: 0px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topright: 0px; -webkit-border-top-right-radius: 0px; z-index: 9999px; display: none; }
ul#secondary-menu ul li, #category_mobile_menu li a { margin: 0 !important; padding: 8px 0 8px 30px !important; width: 150px; float: left; }
ul#secondary-menu ul li a, #category_mobile_menu a { padding: 0 !important; }
ul#secondary-menu li:hover ul ul, ul#secondary-menu li.sfHover ul ul { top: -8px !important; left: 180px !important; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; }
ul#secondary-menu ul li.even-item { background: none; }
.mfilm:hover{
background:#ea2e49 !important;
}
.mtv:hover{
background:#2589cf !important;
}
.mwebvideos:hover{
background:#5c58ac !important;
}
.manimation:hover{
background:#43cf61 !important;
}
.manime:hover{
background:#c142a5 !important;
}
.mmanga:hover{
background:#e77848 !important;
}
.mcomics:hover{
background:#e8eb05 !important;
}
.mwriters:hover{
background:#ff3c75 !important;
}
.mmore:hover{
background:#4b5571 !important;
}
.mliterature:hover{
background:#2c8f83 !important;
}
.mgames:hover{
background:#e34328 !important;
}
.marts:hover{
background:#cc226a !important;
}
.mcontact:hover{
background:#9395aa !important;
}
/* ---------- Mega Drop Down --------- */
ul#mega li { padding-right: 0px; background: url(images/secondary-menu-bg.png) repeat-y top right; }
#mega {
list-style:none;
font-weight:bold;
height:2em;
}
#mega li {
padding: 23px 0px;
background:#999;
border:0px solid #000;
float:left;
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 */
z-index:1; /* shadow above adjacent li */
}
#mega a { font-size: 16px; color: #48423f; text-decoration: none; text-transform: uppercase; font-weight: bold; padding: 22px 16px;}
ul#mega a:hover { color: #FFFFFF; text-shadow: 1px 1px 0 #404747; }
/* ----------- Hide/Show Div ---------- */
#mega div {
-moz-border-bottom-colors: none;
-moz-border-image: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background: none repeat scroll 0 0 #FFFFFF;
border-color: -moz-use-text-color #48423F #48423F;
border-right: 1px solid #48423F;
border-style: none solid solid;
border-width: 0 1px 1px;
font-weight: normal;
left: -999em;
margin-top: 1px;
position: absolute;
text-align: left;
width: 496px;
}
/* --------- Within Div Styles --------- */
#mega li:hover div {
left: -1px;
top: auto;
}
#mega li.dif:hover div {
left: -407px;
top: 72px;
}
#mega li.mmore:hover > a {
color: #FFFFFF; text-shadow: 1px 1px 0 #404747; /* Ensures hover on MORE remains */
}
#mega div h2 {
background: none repeat scroll 0 0 #999999;
clear: both;
float: left;
font-size: 1em;
margin: 10px 0 5px;
padding: 0 10px;
position: relative;
width: 300px;
}
#mega div ticman {
clear: both;
float: left;
position: relative;
margin-left:1px;
margin-right:1px;
width: 495px;
height: 74px;
background-image: url(images/morebgwide.png);
background-size:495px 74px;
background-repeat:no-repeat;
}
#mega div p {
float: left;
padding-left: 10px;
position: relative;
width: 106px;
}
#mega div p a {
clear: left;
float: left;
line-height: 1.4;
text-decoration: underline;
width: 100%;
}
#mega div a:hover, #mega div a:focus, #mega div a:active {
text-decoration: none;
}
/*------------------------------------------------*/
/*--------------[FEATURED SLIDER]-----------------*/
/*------------------------------------------------*/
#featured { position: relative; padding-bottom: 20px; margin-left: -1px; margin-right: -1px; }
a#left-arrow, a#right-arrow { position: absolute; top: 136px; width: 32px; height: 68px; text-indent:-9999px; }
a#left-arrow { background:url(images/left-arrow.png) no-repeat; left: -32px; }
a#right-arrow { background:url(images/right-arrow.png) no-repeat; right: -32px; }
.featured-top-shadow { background:url(images/featured-top-shadow.png) repeat-x; position: absolute; top:0px; left: 0px; width: 958px; height: 7px; }
.featured-bottom-shadow { background:url(images/featured-bottom-shadow.png) repeat-x; position: absolute; bottom:0; left: 0; width: 958px; height: 8px; }
.featured-description { position: absolute; width: 333px; height: 196px; top: 40px; right:54px; background:url(images/featured-description.png); padding: 27px 32px 40px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; }
.featured-description p.meta-info { font-family: Georgia, serif; font-style: italic; font-size: 12px; color: #747474; }
.featured-description p.meta-info a { text-decoration: none; color: #fff; }
h2.featured-title { font-family: 'Kreon', Arial, sans-serif; font-weight: lighter;font-size: 30px; text-shadow: 1px 1px 1px rgba(0,0,0,0.4); margin-top: -4px; }
h2.featured-title a { text-decoration: none; color: #ffffff; }
.featured-description p { color: #c9c8c8; text-shadow: 1px 1px 1px rgba(0,0,0,0.4); line-height: 19px; }
a.readmore { display: block; background: url(images/readmore.png); height: 27px; padding: 0 17px; color: #dfca81; font-size: 12px; line-height: 27px; position: absolute; bottom: 0px; right: 0px; text-shadow: none; }
#featured a.readmore { -moz-border-radius-bottomright: 10px;-webkit-border-bottom-right-radius: 10px; border-bottom-right-radius: 10px; }
#featured a.readmore:hover { color: #fff; }
Although, I would advice overlooking the fiddle for a visual presentation of the issue: http://jsfiddle.net/H8FVE/3/
I have been trying to wrap my head around this all day to a point where I almost set my hair on fire. Do you know how to solve this?

Answer 1

Use the z-index css attribute to visually layer objects like this in HTML regardless of your DOM tree. I would advise you to test your eventual implementation cross browser though, especially IE7. Damn you IE7 for the extra work you cause us all.

Answer 2

See http://jsfiddle.net/H8FVE/6/:
Just add
#second-menu{
z-index:4;position:relative;
}
That's because slide has z-index:3, so if you want to see second-menu, its z-index must be higher.
And you have to add position:relative too because z-index has no effect on elements with position:static.
Edit:
I have seen you have
#mega div{
left:-999em;
}
#mega li.dif:hover div {
left: -407px;
top: 72px;
}
I think it would be better like this:
#mega > li.dif > div{
display:none:
left: -407px;
top: 72px;
}
#mega > li.dif:hover > div {
display: block;
}
That's because if you set left:-999em; to #mega div, you suppose that it won't be shown because -999em is a lot. But if you want to hide it, isn't it better not to display it?
And I have added child selectors (>) because in the future maybe you will modify it and add more divs inside #mega > li.dif > div; and child selectors should be faster than descendant selectors.

Answer 3

Try this:
#mega li:hover {
background:#eee;
border-bottom:0; /* border-bottom:0; and padding-bottom:1px; keeps <li> and <div> connected */
z-index:10; /* shadow above adjacent li */
}
I changed the z-index to 10, instead of 1.
http://jsfiddle.net/H8FVE/5/

Answer 4

Give #second-menu a z-index of 3
Give "#mega div" a z-index of 2
Give #featured a z-index of 1