Drop-down menu not showing up

HTML & CSS
1

I’ve been doing some basic web design for several years, most using Dreamweaver, Fireworks, and Textmate. I’ve used CSS in all of my projects, but I’ve never built any sites exclusively using CSS. I’ve always used tables for the layout/structure of the sites and used CSS for rest.

I am now working a redesign, and I am building the site exclusively in CSS, Javascript, and XHTML. I’ve learned a ton, just in the last few weeks!

I am trying to get the navigation to look like this, with drop-down menu in front of the banner; but when I integrate the navigation into my html file (located [URL=“http://covschool.org/new/”]here) the drop-down menu is going behind the banner. I don’t know if this is a CSS issue or a javascript issue.

I have used several generator sites to help get me started, which have been a real time saver (and yes, I will be giving the generators credit once the site is completed). I used PixoPoint’s drop-down menu generator for the navigation.

2

Hi,
The #banner div is getting it’s z-index set to 1001 via the fadeslideshow.js on line 225.

(scroll all the way to the right)


adddescpanel:function($, setting){
        setting.$descpanel=$('<div class="fadeslidedescdiv"></div>')
            .css([B]{position:'absolute'[/B], visibility:'hidden', width:'100&#37;', left:0, top:setting.dimensions[1], font:fadeSlideShow_descpanel.fontStyle, [B]zIndex:'1001'[/B]})
            .appendTo(setting.$wrapperdiv)

That is really overkill and it was just set that high to make sure nothing layered above it.

I would change it to something reasonable like z-index:10 in the script.

Then you would just need to set the dropdown ul higher than that.

[B]#primary-nav ul[/B] {
    position:absolute;
    [B]z-index:11;[/B]
    left:-999em;
    height:auto;
    width:270px;
    font-weight:normal;
    margin:0;
    line-height:1;
    border:0;
    border-bottom:1px solid #000000;
    }

If you don’t adjust the z-index in the script then you still need to set the sub ul higher than the script which would be 1002.

#primary-nav ul {
    position:absolute; 
    [B]z-index:1002;[/B]
    left:-999em;
    height:auto;
    width:270px;
    font-weight:normal;
    margin:0;
    line-height:1;
    border:0;
    border-bottom:1px solid #000000;
    }
3

Thanks Rayzur! I setting the z-index to 1002 worked perfectly. I tried changing the z-index on line 255, but that didn’t work. I also found out that there’s a z-index set to 1001 on line 236. I tried changing both of them to 10, and the z-index to 11 in my style sheet, but that didn’t work. So i just tried changing the z-index to 1002 in my style sheet, and that did the job!

Major thanks!

4

The thing about working with z-index is that the element must be positioned other than static (which is the default). Any element that is positioned as relative, absolute, or fixed can take on a z-value.

The other thing is that a child can never climb above it’s parent. Since the script is setting that <div class=“fadeslidedescdiv”> z-index to 1001 it would still never be greater than it’s parent which is the #banner div.

You have not set any styles in the css for that #banner div so we can set position:relative and a z-index on it. If we set it to z-index:1 then all of it’s children will never be greater than that.

Very rarely do you need to set high values for z-index. Even a very complex site would be able to work with 10 layers on the z-axis.

I think I would set up a rule for the banner div and then just set the nav ul one z-level higher.

[B]#primary-nav ul[/B] {
[COLOR=Blue]    position:absolute;
    z-index:2;[/COLOR]
    left:-999em;
    height:auto;
    width:270px;
    font-weight:normal;
    margin:0;
    line-height:1;
    border:0;
    border-bottom:1px solid #CCCCCC;
}

/*--- end nav styles ---*/

[B]#banner[/B] {
[COLOR=Blue]    position:relative;
    z-index:1;[/COLOR]
}

That will work and keep things reasonable. :wink:

5

Thanks again Rayzur! I’ve made the changes and everything is working perfectly!