Drop Down Menu

HTML & CSS
1

I created my first CSS based drop down menu, but it doesn’t seem to work. The menu goes behind the content and is not clickable in both ie and ff.

The “#menu” is what styles the drop down menu

The “services link” is the only drop down

Thanks,

2

What is the menu ‘going behind’?

Going to need to see some code to help.

3

HTML:


<div id="menu">

<ul id="home-1">
<li class="top"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Home','','images/home-alt.jpg',1)"><img src="images/home.jpg" alt="Home" name="Home" width="103" height="29" border="0" id="Home" /></a></li>
</ul>

<ul id="about-us-2">
<li class="top"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('About Us','','images/about-us-alt.jpg',1)"><img src="images/about-us.jpg" alt="About Us" name="About Us" width="128" height="29" border="0" id="About Us" /></a></li>
</ul>

<ul id="services-3">
<li class="top"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Services','','images/services-alt.jpg',1)"><img src="images/services.jpg" alt="Services" name="Services" width="121" height="29" border="0" id="Services" /></a></li>
<li class="item"><a href="index.html"><img src="images/services.jpg" /></a></li>
<li class="item"><a href="index.html"><img src="images/services.jpg" /></a></li>
<li class="item"><a href="index.html"><img src="images/services.jpg" /></a></li>
</ul>

<ul id="gallery-4">
<li class="top"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Gallery','','images/gallery-alt.jpg',1)"><img src="images/gallery.jpg" alt="Gallery" name="Gallery" width="108" height="29" border="0" id="Gallery" /></a></li>

</ul>

<ul id="testimonials-5">
<li class="top"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Testimonials','','images/testimonials-alt.jpg',1)"><img src="images/testimonials.jpg" alt="Testimonials" name="Testimonials" width="155" height="29" border="0" id="Testimonials" /></a></li>
</ul>

<ul id="contact-us-6">
<li class="top"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Contact Us','','images/contact-us-alt.jpg',1)"><img src="images/contact-us.jpg" alt="Contact Us" name="Contact Us" width="124" height="29" border="0" id="Contact Us" /></a></li>
</ul>

<ul id="eight-7">
<li class="top"><img src="images/eight.jpg" width="211" height="29" /></li>
</ul>

</div>
<div id="under-nav"><img src="images/under-nav.jpg" /></div>

CSS


#menu{
    width:950px;
    height:29px;
    float: left;
    z-index: 10;
}
#under-nav  {
    float: left;
    height: 11px;
    width: 950px;
    z-index: 5;
}

#menu ul .item{display:none;}
#menu ul:hover .item{
    display:block;
    width:100px;
    height:25px;
    padding:0px;
    margin:0px;
}

#menu ul:hover .item a{color:;text-decoration:none;}
#menu ul:hover .item a img{
    border:none;
}
#menu ul:hover .item a:hover{color:;}

#menu ul{
    height:29px;
    float:left;
    margin:0px;
    padding:0px;
    list-style:none;
}
.clear{clear:both;height:10px;}

#home-1 { width:103px;

}
#about-us-2 { width:128px;

}
#services-3 { width:121px;

}
#gallery-4 { width:108px;

}
#testimonials-5 { width:155px;

}
#contact-us-6 { width:124px;

}
#eight-7 { width:211px;

}
4

You would need to add position:relative to #menu as z-index only applies to positioned elements.


#menu {
    width:950px;
    height:29px;
    float: left;
    z-index: 10;
[B]position:relative;
}[/B]

The z-index of 10 would need to be higher than the content that follows it of course.

I would suggest that you abandon that old fashioned js rollover menu and go for something leaner and cleaner like the suckerfish menus.

Here is an example.

5

I was going to say the same thing when I saw the DW code in my email, you beat me to it.

6
Off Topic:

Hi dc - nice to see you still around :slight_smile:

7

Just came back actually but I will be around for a while

8

Thanks for the information. I did this and it worked great. Also, considering you both recommended the sucker fish menu, I will look into that instead. Thanks, Samuel

9

I have an example of the power of suckerfish menu, combined with a CSS layout you can look at here:

There are also two tutorials on my site that go along with it. Feel free to steal the code from the example and play with it. Once you understand and start using these type menus you will never go back to that DW garbage

10

DC, nice article. “Spider killer” menus?