Grow your CSS skills. Land your dream job.

Featured Content Slider & CSS Drop Menu

  • # July 21, 2009 at 6:58 pm

    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

    # July 21, 2009 at 7:40 pm

    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

    # July 22, 2009 at 10:59 am

    .level2 {background-color:#ffffff; z-index:1;}

    just want to let you know that your code is a bit of a mess, you have id’s & classes that you don’t have css for, so your not selecting the correct things.

    # July 22, 2009 at 7:22 pm

    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.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".