timrauter
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.
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>
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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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
top: 20px
left: 20px
set the position where it was...
more reference
http://www.w3schools.com/css/css_reference.asp
ASKER
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
Help
ASKER
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/
http://www.dynamicdrive.com/style/csslibrary/item/jquery_multi_level_css_menu_2/
Open in new window