Link to home
Start Free TrialLog in
Avatar of timrauter
timrauterFlag for United States of America

asked on

Horizontal Drop Down Menu With Images

Hey Guys,
I'm pulling my hair out right now. All I need is a dropdown (sub-menu) that is initiated by an image. I used images for the menu of the site and I just need  cross-browser, good, clean drop-down menu code. I'm assuming the best way is JS and CSS but you tell me.

Here's the site I'm working on.

http://www.comewhatmaythemovie.com/_test/

If you look at the ABOUT menu  section you'll see the jacked up menu I've been playing with. I feel like I'm almost there but I need some help.

IN THE <HEAD>
<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) {
		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
}
//-->
</script>
 
 
<style type="text/css">
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
z-index:100;
width: 100%;
}
#menu dl {
position: relative;
top: 0;
left: 0;
float: left;
width: 12em;
margin: 0;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #ccc;
border: 1px solid gray;
}
#menu dd {
border: 1px solid gray;
}
#menu li {
text-align: center;
background: #fff;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu dt a:hover {
background: #eee;
}
</style>
</HEAD>
 
 
 
 
 
 
 
 
<BODY>
<img src="http://www.comewhatmaythemovie.com/_test/_images/menu_about.jpg" alt="about" name="nav2" width="65" height="37" border="0"/></a><dl><dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">
				<ul>
                <li><a href="#">Sous-Menu 1.1</a></li>
					<li><a href="#">Sous-Menu 1.2</a></li>
					<li><a href="#">Sous-Menu 1.3</a></li>
					<li><a href="#">Sous-Menu 1.4</a></li>
					<li><a href="#">Sous-Menu 1.5</a></li>
					<li><a href="#">Sous-Menu 1.6</a></li>
				</ul></dd></dl>
</BODY>

Open in new window

Avatar of ali_pakkan
ali_pakkan
Flag of Türkiye image

add to #menu:

position: absolute;

Open in new window

Avatar of timrauter

ASKER

I tried both "relative" and "absolute" positions for menu..the problem is that the boxes don't appear UNDER the ABOUT image button...that's what I'm looking for.
ASKER CERTIFIED SOLUTION
Avatar of ali_pakkan
ali_pakkan
Flag of Türkiye image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Kin Fat SZE
try to add css attribute
top: 20px
left: 20px
set the position where it was...
more reference
http://www.w3schools.com/css/css_reference.asp
ali_pakkan...I like the links you gave me because I'm a big fan of JQuery. My question now is this. The examples that you gave me deal only with list items. What about if you're using images for buttons? How do I initiate the drop-down. Is it a mouseover event?

Help
Thanks everyone for helping me out. Ali_Pakkan...your links sparked another link I found that has a really nice JQuery slide in feature to it. I ended up using that. Here's the link if anyone needs it:

http://www.dynamicdrive.com/style/csslibrary/item/jquery_multi_level_css_menu_2/