Drop Down Menu Help

**Dako97669** · 05-09-2006 07:40 PM

I am doing a web page for one of my teachers, but I have ran into a problem that I can not seem to fix.

I have a menu bar underneath the header that is made up and placed using divs. Each div has a background image placed through css, so I can add text on top of it. I am using the list method to create vertical drop down menu on only one of the menu options but It is not working right. Because of image for the background, the menu either does not work, or it creates a blue box (the color of the drop down menus) over the image and it does not match the rest of my menu bar options. Is there a way to have an image as a background that drops down into a menu?

If this is confusing please ask and I will try and provide more clearity.

CSS Code:

Code:

body { background-color: #000; text-align: left; margin-top: 0; margin-left: 0; padding-top: 15px; padding-left: 15px; }
td { }
.option { color: white; font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; text-decoration: none; text-align: center; padding-top: 10px; }
h2 { color: white; font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; text-decoration: none; text-align: center; text-align: center; width: 100px; height: 12px; z-index: 10; }
a:link { }

a:visited { }

a:hover { }

a:active { }
#head { color: #fff; font-size: 30px; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; background-image: url(../images/header.jpg); background-repeat: no-repeat; text-decoration: none; text-align: left; width: 1000px; height: 200px; margin-left: 50px; padding-left: 50px; }
#title { position: absolute; top: 75px; left: 250px; }
#menu1 { background-image: url(../images/menu.jpg); background-repeat: no-repeat; text-align: center; vertical-align: bottom; position: absolute; top: 142px; left: 205px; width: 100px; height: 29px; }
#menu2 { background-image: url(../images/menu.jpg); background-repeat: no-repeat; text-align: center; position: absolute; top: 142px; left: 310px; width: 100px; height: 29px; vertical-align: bottom; }
#menu3 { background-image: url(../images/menu.jpg); background-repeat: no-repeat; text-align: center; position: absolute; top: 142px; left: 415px; width: 100px; height: 29px; vertical-align: bottom; }
#menu4 { background-image: url(../images/menu.jpg); background-repeat: no-repeat; text-align: center; position: absolute; top: 142px; left: 520px; width: 100px; height: 29px; vertical-align: bottom; }
#menu5 { background-image: url(../images/menu.jpg); background-repeat: no-repeat; text-align: center; position: absolute; top: 142px; left: 625px; width: 100px; height: 29px; vertical-align: bottom; list-style-type: none; }
#dropdown { background-color: #00c; width: 100%; height: auto; float: left; }
#dropdown ul { width: 100px; float: left; margin: 0; padding: 0; list-style-type: none; }
#dropdown a { color: #fff; font-size: 10px; font-weight: bold; background-color: #00c; text-decoration: none; text-align: center; vertical-align: middle; margin: 0; padding-top: 6px; padding-bottom: 6px; border: solid 3px #000; display: block; }
#dropdown a:hover { background-color: #000; }
#dropdown li { position: relative; }
#dropdown ul ul { position: absolute; top: 10px; z-index: 500; }
div#dropdown ul ul { display: none; }
div#dropdown ul li:hover ul { display: block; }

Site Code:

Code:

<body>

<div id="head">
   <div id="title">Al Gotlieb Gallery.com</div>
</div>
		
<div id="menu1">
   <div class="option">Home</div>
</div>

<div id="menu2">
   <div class="option">Press Release</div>
</div>

<div id="menu3">
   <div class="option">Price List</div>
</div>
		
<div id="menu4">
   <div class="option">Contact Me</div>
</div>
		
<div id="menu5">
   <div class="options">Galleries</div>
   <div id="dropdown">
	<ul>
	<li>
		<ul>
		<li><a href="">Gallery 1</a></li>
		<li><a href="">Gallery 2</a></li>
		<li><a href="">Gallery 3</a></li>
		</ul>
	</li>
	</ul>
   </div>	
</div>
</body>

**Dako97669** · 05-09-2006 08:25 PM

Can some please just tell me how to fix the Galleries thing on the end, and tell me why the drop down isnt working?

Site Here

**ray326** · 05-09-2006 10:05 PM

The dropdown works in browsers, just not IE. IE only understands those attributes in relation to anchor tags. I'd recommend you recode the whole menu as what it is, a list of links.

**Dako97669** · 05-09-2006 11:43 PM

what would be the best way to do that with drop down menus? using java script?

**ray326** · 05-10-2006 10:18 PM

You can either use Javascript or something I think is called a behavior file for IE. Here's one. http://www.vladdy.net/demos/iepseudoclassesfix.html

Here's my favorite Javascript menu. http://juicystudio.com/article/ecmascriptmenu.php

Thread: Drop Down Menu Help

Thread Tools

Display

Drop Down Menu Help

To make it simpler

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions