Featured Content Slider & CSS Drop Menu

[Yazoo]

I am a rookie when it comes to CSS but i guess we all have to start somewhere.

I am using a dropdown css menu based on one of Stu Nichols menus and Chris’s Featured Content Slider.

On their own both the slider and menu function in the way it should. Together is where the problem begins.

A working example can be found here http://trinitia.co.uk/FeaturedContentSlider/index.html

When you hover over the menu and the child menu appears it is obstructed by the slider and I am now lost on how to over come this.

It would seem that the panel contents of the slider is layered above the menu.

if anyone can help it would be very much appreciated.

kind regards

CSS menu code

Code:

#menu {width:860px; height:27px; background: #ed008c; text-align:left;}

#menu ul {margin:0; padding:0; list-style:none; white-space:nowrap; text-align:left; border:1px solid #ed008c;}
#menu ul {display:inline-block;}
#menu ul {display:inline;}

#menu li {margin:0; padding:0; list-style:none;}
#menu li {display:inline-block; display:inline;}
#menu ul ul {position:absolute; left:-9999px;}
#menu ul.level1 {display:table; color:#FFF}
#menu ul.level1 li.level1-li {float:left; display:block; position:relative;}

#menu b {position:absolute;} /* — for IE6 non-flyout dropdowns to stop flickering – who knows why –*/

#menu a {display:block; font:bold 11px verdana,arial,sans-serif; line-height:25px; text-decoration:none;padding:0 19px;}
#menu ul.level1 li.level1-li a.level1-a {float:left; color:#FFF;}

#menu ul li:hover > ul {visibility:visible; left:0; top:25px; background-color:#ffffff} /* makes the background of the drop down box white */
#menu ul ul li:hover > ul {visibility:visible; left:100%; top:auto; margin-top:-25px;}
#menu li.left:hover > ul {visibility:visible; left:auto; right:0; top:25px;}
#menu li.left ul li:hover > ul {visibility:visible; left:auto; right:100%; top:auto; margin-top:-25px;}

#menu a:hover ul {left:0; top:23px;}
#menu li.left a:hover ul {left:auto; right:-1px; top:23px;}

#menu li.left ul a {text-align:right;}

#menu a:hover a:hover ul,
#menu a:hover a:hover a:hover ul {left:100%; visibility:visible;}
#menu li.left a:hover a:hover ul,
#menu li.left a:hover a:hover a:hover ul {left:auto; right:0; visibility:visible;}

#menu a:hover ul ul,
#menu a:hover a:hover ul ul {left:-9999px;}
#menu li.left a:hover ul ul,
#menu li.left a:hover a:hover ul ul {left:-9999px;}

#menu li a.drop {background:transparent url(../img/menu/white-down.gif) no-repeat right center; color: #ffffff;}
#menu li a.fly {background:transparent url(../img/menu/white-right.gif) no-repeat right center;}
#menu li.left ul a.fly {background:transparent url(../img/menu/white-left.gif) no-repeat left center;}

#menu li a.drop:hover {color:#ffffff; white-space:nowrap;}

#menu li a:hover,
#menu li a.fly:hover {color:#ed008c; white-space:nowrap;}
#menu li:hover > a,
#menu ul li:hover > a.fly {color:#ed008c; white-space:nowrap;}

#menu table {position:absolute; height:0; width:0; left:0; border-collapse:collapse; margin-top:-4px;}
#menu table table {position:absolute; left:99%; height:0; width:0; border-collapse:collapse; margin-top:-29px;}

#menu li.left table {position:absolute; height:0; width:0; left:auto; right:0; border-collapse:collapse; margin-top:-4px;}
#menu li.left table table {position:absolute; left:auto; right:100%; height:0; width:0; border-collapse:collapse; margin-top:-29px;}

Yazoo

[Yazoo]

I have found a solution I added the following to the css code for the menu

Code:

ul {
z-index: 1;
}

now works fine.

Hope that this help others.

Many thanks and keep up the great work Chris

[Yazoo]

I haven’t completed the menu yet as the level2 in the CSS code is for the second level of links. But thank you for looking.

[Author]

Posts