CSS horizontal dropdrown menu

JLG · January 13, 2006

This one is really annoying me, i can't believe i've had two stupid problems so close together.Right, i have a menu going across the page under my header image. when you move your mouse over a menu item, submenu items are shown, all fine when i had no content on the page. When i put content on the page and you moved your mouse over the menu it pushed everything down, i solved this with positioning and z-index so it would open over the top of eveything. The problem now is when you move the cursor down the submenus when you get to the content underneith it closes the menu. I've tried every combination of z-index and positioning on every div i can think of and i still can't get it to work, my head is fried and i'm slowly giving up the will to live. does anyone have any ideas?Code to follow...

JLG · January 13, 2006

Everything is broken up in to different files for future easy editing, which might make it more difficult to understand. This is the index page code:

<?php$title = 'blah blah blah';include('/inc/header.php');?><div id="leftmenucontainer"><img src="#"><br><br><img src="#"></div><div id="textarea"><h3><b>Blah Blah Blah</b></h3><h5>Lorem ipsum dolor</h5>sit amet, consectetuer adipiscing elit. Aenean tortor quam, convallis sit amet, nonummy ut, rhoncus vitae, velit. Sed tristique augue in quam. Mauris posuere turpis et lacus. Etiam suscipit.<br><br>at ornare ipsum enim sed ante. Mauris odio turpis, egestas rutrum, venenatis nec, euismod rutrum, tellus. Pellentesque consectetuer gravida diam. Proin vestibulum </div></div></div></body></html>

header code is:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><title><? echo $title; ?></title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><script language="javascript1.2" src="/inc/jscripts.js" type="text/javascript"></script><script type="text/javascript"><!--window.onload=show;function show(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><link rel="stylesheet" href="/inc/main.css" type="text/css"></head><body bgcolor="#FFFFFF" text="#000000"><div id="container"><div id="topmenucontainer"><div id="headerimages"><a href="index.php"><img src="/inc/header_images/rotator.php" border="0" alt="Go to homepage"></a></div><?include('/menus/main_top_menu.html');?></div><div id="content">

Top menu code:

<div id="topmenu">	<dl>  	  <dt onmouseover="javascript:show('smenu1');">blah 1</dt>  	<dd id="smenu1" onmouseover="javascript:show('smenu1');" onmouseout="javascript:show('');">    <ul>    	<li><a href="#">blah 1a</a></li>    	<li><a href="#">blah 1b</a></li>    	<li><a href="#">blah 1c</a></li>    	<li><a href="#">blah 1d</a></li>        </ul>  	</dd>	</dl>			<dl>	  <dt class="leftborder" onmouseover="javascript:show('smenu2');">blah 2</dt>  	<dd id="smenu2" onmouseover="javascript:show('smenu2');" onmouseout="javascript:show('');">    <ul>    	<li><a href="#">blah 2a</a></li>    	<li><a href="#">blah 2b</a></li>    	<li><a href="#">blah 2c</a></li>    </ul>  	</dd>	</dl>		<dl>	  <dt class="leftborder" onmouseover="javascript:show('smenu3');">blah 3</dt>  	<dd id="smenu3" onmouseover="javascript:show('smenu3');" onmouseout="javascript:show('');">    <ul>    	<li><a href="#">blah 3a</a></li>    	<li><a href="#">blah 3b</a></li>    	<li><a href="#">blah 3c</a></li>    	<li><a href="#">blah 4c</a></li>    	</ul>  	</dd>	</dl>		<dl>	  <dt class="leftborder" onmouseover="javascript:show('smenu4');">blah 4</dt>  	<dd id="smenu4" onmouseover="javascript:show('smenu4');" onmouseout="javascript:show('');">    <ul>    	<li><a href="#">blah 4a</a></li>    	<li><a href="#">blah 4b</a></li>    	<li><a href="#">blah 4c</a></li>    	<li><a href="#">blah 4d</a></li>    	<li><a href="#">blah 4e</a></li>    	</ul>  	</dd>	</dl>		<dl>	  <dt class="leftborder" onmouseover="javascript:show('smenu5');">blah 5</dt>  	<dd id="smenu5" onmouseover="javascript:show('smenu5');" onmouseout="javascript:show('');">    <ul>    	<li><a href="#">blah 5a</a></li>    	<li><a href="#">blah 5b</a></li>    </ul>  	</dd>	</dl></div>

last one of the longest post ever, CSS code:

body {background-image:url("../images/bg.gif");background-color:#863481;text-align: center;margin:0px;padding:0px;}a {font-family:Verdana, Arial, Helvetica, sans-serif;font-size: 11px;color: #555555;text-decoration:none;outline: none;}#container {border-left:2px solid #863481;border-right:2px solid #863481;width:754px;height:100%;text-align: left;margin: 0px auto;background-color: #FFFFFF;padding:0px;position:relative;z-index:1;}#topmenucontainer {width:750px;height:175px;margin-top:1px;border-top:1px solid #863481;padding-top:1px;padding:0px;position:absolute;top:0px;z-index:100;}#headerimages {height:150px;padding:0px;padding-top:1px;}#content {font-family:Verdana, Arial, Helvetica, sans-serif;font-size: 11px;color:#863481;width:730px;height:500px;padding:0px;margin:10px;position:absolute;top:175px;z-index:1;}#leftmenucontainer {width:175px;padding:0px;margin:0px;float:left;position:absolute;z-index:1;}#textarea {float:right;width:530px;z-index:1;position:relative;}----#topmenu a {font-family:Verdana, Arial, Helvetica, sans-serif;font-size: 11px;color: #FFFFFF;text-decoration:none;outline: none;}#topmenu {position: absolute; /* Menu position that can be changed at will */z-index:100;width: 750px;border-top:1px solid #863481;margin-top:1px;}#topmenu dl {float: left;width: 150px;position:relative;z-index:100;}#topmenu dt {cursor: pointer;text-align: center;font-weight: bold;background: #863481;font-family:Verdana, Arial, Helvetica, sans-serif;font-size: 11px;color: #FFFFFF;text-decoration:none;outline: none;padding:3px;margin-top:1px;margin-bottom:2px;position:relative;z-index:100;}.leftborder {border-left: 1px solid #FFFFFF;}#topmenu dd {width:148px;display: none;border: 1px solid gray;padding:4px 0px 0px 0px;margin:0px;position:relative;z-index:100;}#topmenu ul, li {text-align: left;background: #FFFFFF;padding:0px 2px 0px 2px;margin:0px;font-family:Verdana, Arial, Helvetica, sans-serif;font-size: 11px;color: #863481;list-style-type: none;position:relative;z-index:100;}#topmenu li a, #topmenu dt a {color: #863481;text-decoration: none;display: block;height: 100%;padding: 2px;position:relative;z-index:100;}#topmenu li a:hover, #topmenu li a:focus, #topmenu dt a:hover, #topmenu dt a:focus {background: #eee;border-right: 3px solid #863481;position:relative;z-index:100;}

Sorry there is so much, please help. Thanks.

JLG · January 16, 2006

I still haven't managed to work this one out. It's really annoying me. Does anyone know if it's an IE bug or something?

January 16, 2006

It looks like it could be a bug in IE, assuming it's working in other browsers?I found this site which has some workarounds for IE in the tutorial - particularly related to :hover. I don't know if this is relevant, but their horizontal drop down seems to work fine in IE so you might be able to find something in the code.http://www.seoconsultants.com/css/menus/horizontal/And another work around for the IE :hover issue without using an external file:http://www.htmldog.com/articles/suckerfish/dropdowns/That's about the best I can come up with at the moment.Hope it helps.

JLG · January 16, 2006

Thanks but not much help really.I can't test it in other browsers. It only has to work on IE PC cuz i'm on a internal system where everyone uses IE and no one has permissions to download anything, So it will only ever be seen in IE. Fools. I'm sure this is possible and i'm just missing something stupid, so i'll keep trying.

Sign In

CSS horizontal dropdrown menu

Recommended Posts

JLG

Link to comment

Share on other sites

JLG

Link to comment

Share on other sites

JLG

Link to comment

Share on other sites

Guest BDB

Link to comment

Share on other sites

JLG

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity