CSS - Drop Down Menu Problems

Hi, I'm trying to make a drop-down menu using CSS and javascript. I'm posting this here because the javascript (and most of the css!) is working fine, I just need some help with the positioning.

You can see the menu so far on the website I'm beginning to develop, 10pinleague.com. As you can see the initial drop downs work as intended but when you attempt to open a submenu, that should appear to the right of the drop down menu, it appears in completely the wrong place. And for some odd reason the distance from the drop-down menus to the submenus increases more and more as you progress from Menu 1 to Menu 2 and 3.

I'm no expert at either javascript or CSS, so the drop down menu was something that I downloaded from a website, here, and then adapted to suit my site. Perhaps this wasn't intended to work as a cascading drop down menu. I just thought if I apply the same principle of wrapping the link in a div and getting that to show another new div containing the submenu it should work. And it kind of does, just in the wrong place - which I do not understand why this happens.

Here is the HTML code for the menu. (note this is not the actual code on my website, this is code that is generated from a php loop I've made. But the HTML remains the same).
Code:

<!--	  START OF MENU	  !-->

<table width='730' height='30'>
<tr>
	
	
	<td width='20%' align='center'>
	<div id='menu1a'>
	<a href='#'>Menu 1</a>
	</div>
	<div id='menu1b' class='menu_dropdown'>
	<table width='150' height='50'>
	<tr>
		<td class='padded'>
		<table width='100%' height='100%'>
		<tr>
			<td  class='menuNormal' onmouseover='expand(this);' onmouseout='collapse(this);'>
			<div id='submenu1_1a'>
			<a href='#'>Item 1</a>
			</div>
			</td>
		</tr>
		<tr>
			<td  class='menuNormal' onmouseover='expand(this);' onmouseout='collapse(this);'>
			<div id='submenu1_2a'>
			<a href='#'>Item 2</a>
			</div>
			</td>
		</tr>
		<tr>
			<td  class='menuNormal' onmouseover='expand(this);' onmouseout='collapse(this);'>
			<div id='submenu1_3a'>
			<a href='#'>Item 3</a>
			</div>
			</td>
		</tr>
		</table>
		</td>
	</tr>
	</table>
	</div>
	<script type='text/javascript'>at_attach('menu1a', 'menu1b', 'hover', 'y', 'pointer');</script>
	</td>
	
	
	<td width='20%' align='center'><div id='menu2a'>
	<a href='#'>Menu 2</a>
	</div>
	<div id='menu2b' class='menu_dropdown'>
	<table width='150' height='50'>
	<tr>
		<td class='padded'>
		<table width='100%' height='100%'>
		<tr>
			<td  class='menuNormal' onmouseover='expand(this);' onmouseout='collapse(this);'>
			<div id='submenu2_1a'>
			<a href='#'>Item 2</a>
			</div>
			</td>
		</tr>
		<tr>
			<td  class='menuNormal' onmouseover='expand(this);' onmouseout='collapse(this);'>
			<div id='submenu2_2a'>
			<a href='#'>Item 2</a>
			</div>
			</td>
		</tr>
		<tr>
			<td  class='menuNormal' onmouseover='expand(this);' onmouseout='collapse(this);'>
			<div id='submenu2_3a'>
			<a href='#'>Item 3</a>
			</div>
			</td>
		</tr>
		<tr>
			<td  class='menuNormal' onmouseover='expand(this);' onmouseout='collapse(this);'>
			<div id='submenu2_4a'>
			<a href='#'>Item 4   ></a>
			</div>
			
			<div id='submenu2_4b' class='menu_dropdown'>
			<table width='150' height='50'>
			<tr>
				<td class='padded'>
				<table width='100%' height='100%'>
				<tr>
					<td  class='menuNormal' onmouseover='expand(this);' onmouseout='collapse(this);'>
					<a href='#'>Item 4a</a>
					</td>
				</tr>
				<tr>
					<td  class='menuNormal' onmouseover='expand(this);' onmouseout='collapse(this);'>
					<a href='#'>Item 4b</a>
					</td>
				</tr>
				</table>
				</td>
			</tr>
			</table>
			</div>
			<script type='text/javascript'>at_attach('submenu2_4a', 'submenu2_4b', 'hover', 'y', 'pointer');</script>
			
			</td>
		</tr>					
		<tr>
			<td  class='menuNormal' onmouseover='expand(this);' onmouseout='collapse(this);'>
			<div id='submenu2_5a'>
			<a href='#'>Item 5</a>
			</div>
			</td>
		</tr>
		</table>
		</td>
	</tr>
	</table>
	</div>
	<script type='text/javascript'>at_attach('menu2a', 'menu2b', 'hover', 'y', 'pointer');</script></td><td width='20%' align='center'><div id='menu3a'><a href='#'>Menu 3</a></div><div id='menu3b' class='menu_dropdown'><table width='150' height='50'><tr><td class='padded'><table width='100%' height='100%'><tr><td  class='menuNormal' onmouseover='expand(this);' onmouseout='collapse(this);'><div id='submenu3_1a'><a href='#'>Item 3</a></div></td></tr><tr><td  class='menuNormal' onmouseover='expand(this);' onmouseout='collapse(this);'><div id='submenu3_2a'><a href='#'>Item 2</a></div></td></tr><tr><td  class='menuNormal' onmouseover='expand(this);' onmouseout='collapse(this);'><div id='submenu3_3a'><a href='#'>Item 3</a></div></td></tr></table></td></tr></table></div><script type='text/javascript'>at_attach('menu3a', 'menu3b', 'hover', 'y', 'pointer');</script></td><td width='20%' align='center'><div id='menu4a'><a href='#'>Menu 4</a></div><div id='menu4b' class='menu_dropdown'><table width='150' height='50'><tr><td class='padded'><table width='100%' height='100%'><tr><td  class='menuNormal' onmouseover='expand(this);' onmouseout='collapse(this);'><div id='submenu4_1a'><a href='#'>Item 4</a></div></td></tr><tr><td  class='menuNormal' onmouseover='expand(this);' onmouseout='collapse(this);'><div id='submenu4_2a'><a href='#'>Item 2</a></div></td></tr><tr><td  class='menuNormal' onmouseover='expand(this);' onmouseout='collapse(this);'><div id='submenu4_3a'><a href='#'>Item 3</a></div></td></tr></table></td></tr></table></div><script type='text/javascript'>at_attach('menu4a', 'menu4b', 'hover', 'y', 'pointer');</script></td><td width='20%' align='center'><div id='menu5a'><a href='#'>Menu 5</a></div><div id='menu5b' class='menu_dropdown'><table width='150' height='50'><tr><td class='padded'><table width='100%' height='100%'><tr><td  class='menuNormal' onmouseover='expand(this);' onmouseout='collapse(this);'><div id='submenu5_1a'><a href='#'>Item 1</a></div></td></tr><tr><td  class='menuNormal' onmouseover='expand(this);' onmouseout='collapse(this);'><div id='submenu5_2a'><a href='#'>Item 2</a></div></td></tr><tr><td  class='menuNormal' onmouseover='expand(this);' onmouseout='collapse(this);'><div id='submenu5_3a'><a href='#'>Item 3</a></div></td></tr></table></td></tr></table></div><script type='text/javascript'>at_attach('menu5a', 'menu5b', 'hover', 'y', 'pointer');</script></td>				
	
</tr>
</table>

Here is the related CSS.....but I doubt this is important.
Code:

.menu_dropdown { background-color: #a5caad; border: 1px solid #057c1f; position: absolute; visibility: hidden; font-size: small; }
.menu_dropdown A:link {text-decoration: none; color: #000; font-weight: normal; }
.menu_dropdown A:visited {text-decoration: none; color: #000; font-weight: normal; }
.menu_dropdown A:active {text-decoration: none; color: #000; font-weight: normal; }
.menu_dropdown A:hover {text-decoration: underline; color: #000; font-weight: normal; }

td.menuNormal
{padding: 0px;
font-weight: bold;
vertical-align: top;
background-color:#a5caad;}

td.menuHover
{padding: 0px;
font-weight: bold;
vertical-align: top;
background-color: #87bc93;}

And here is the javascript file, that I have not modified in any way from the site I linked to above.
Code:

// <script>

// Copyright (C) 2005 Ilya S. Lyubinskiy. All rights reserved.
// Technical support: http://www.php-development.ru/
//
// YOU MAY NOT
// (1) Remove or modify this copyright notice.
// (2) Distribute this code, any part or any modified version of it.
//     Instead, you can link to the homepage of this code:
//     http://www.php-development.ru/javascripts/dropdown.php.
//
// YOU MAY
// (1) Use this code on your website.
// (2) Use this code as a part of another product provided that
//     its main use is not creating javascript menus.
//
// NO WARRANTY
// This code is provided "as is" without warranty of any kind, either
// expressed or implied, including, but not limited to, the implied warranties
// of merchantability and fitness for a particular purpose. You expressly
// acknowledge and agree that use of this code is at your own risk.

function expand(s)
{
  var td = s;
  var d = td.getElementsByTagName("div").item(0);

  td.className = "menuHover";
}

function collapse(s)
{
  var td = s;
  var d = td.getElementsByTagName("div").item(0);

  td.className = "menuNormal";
}

// ----- Popup Control ---------------------------------------------------------

function at_display(x)
{
  var win = window.open();
  for (var i in x) win.document.write(i+' = '+x[i]+'<br>');
}

// ----- Show Aux -----

function at_show_aux(parent, child)
{
  var p = document.getElementById(parent);
  var c = document.getElementById(child );

  var top  = (c["at_position"] == "y") ? p.offsetHeight+2 : 0;
  var left = (c["at_position"] == "x") ? p.offsetWidth +2 : 0;

  for (; p; p = p.offsetParent)
  {
    top  += p.offsetTop;
    left += p.offsetLeft;
  }

  c.style.position   = "absolute";
  c.style.top        = top +'px';
  c.style.left       = left+'px';
  c.style.visibility = "visible";
}

// ----- Show -----

function at_show()
{
  var p = document.getElementById(this["at_parent"]);
  var c = document.getElementById(this["at_child" ]);

  at_show_aux(p.id, c.id);

  clearTimeout(c["at_timeout"]);
}

// ----- Hide -----

function at_hide()
{
  var c = document.getElementById(this["at_child"]);

  c["at_timeout"] = setTimeout("document.getElementById('"+c.id+"').style.visibility = 'hidden'", 333);
}

// ----- Click -----

function at_click()
{
  var p = document.getElementById(this["at_parent"]);
  var c = document.getElementById(this["at_child" ]);

  if (c.style.visibility != "visible")
       at_show_aux(p.id, c.id);
  else c.style.visibility = "hidden";

  return false;
}

// ----- Attach -----

// PARAMETERS:
// parent   - id of visible html element
// child    - id of invisible html element that will be dropdowned
// showtype - "click" = you should click the parent to show/hide the child
//            "hover" = you should place the mouse over the parent to show
//                      the child
// position - "x" = the child is displayed to the right of the parent
//            "y" = the child is displayed below the parent
// cursor   - Omit to use default cursor or check any CSS manual for possible
//            values of this field

function at_attach(parent, child, showtype, position, cursor)
{
  var p = document.getElementById(parent);
  var c = document.getElementById(child);

  p["at_parent"]     = p.id;
  c["at_parent"]     = p.id;
  p["at_child"]      = c.id;
  c["at_child"]      = c.id;
  p["at_position"]   = position;
  c["at_position"]   = position;

  c.style.position   = "absolute";
  c.style.visibility = "hidden";

  if (cursor != undefined) p.style.cursor = cursor;

  switch (showtype)
  {
    case "click":
      p.onclick     = at_click;
      p.onmouseout  = at_hide;
      c.onmouseover = at_show;
      c.onmouseout  = at_hide;
      break;
    case "hover":
      p.onmouseover = at_show;
      p.onmouseout  = at_hide;
      c.onmouseover = at_show;
      c.onmouseout  = at_hide;
      break;
  }
}

Can somebody please help me get the submenus appearing next to the divs in the drop-down menus that they relate to, rather than half way across the page? Thank you very much!


PS. If you think I've asked this in the wrong place and it should be in the Javascript forum, could you move it for me? Thanks.

Hello everyone,

I have a drop-down menu that is currently working well.

The only change I need to make is to have the right edge of the drop-down menu to align with the right edge of the parent menu. When you hover over the menu, it currently "drops" down and to the right, with the left edges aligned.

I want the menu to "drop" down and to the left, so the right edges are aligned.

I have tried fiddling with floats and absolute/relative positioning. I'm not sure what needs to be changed.

Any help you can provide is greatly appreciated! I'm learning via "cut and paste", so please go easy on any terminology you may use.

Thank you!

Here is the page: http://www.littlebuddymedia.com/site05/012.html



The menu currently drops like this (aligned along the left edge): http://www.justskins.com/wp-content/uploads/2008/12/drop-down-menu.gif



I want the menu to do this (align along the right edge; see how "Artists" is aligned under "Music" along the right edge): http://artatm.com/wp-content/uploads/2009/11/mtvmenu.JPG

Here is my code:

Code:

.chromestyle{
     width: 100%;
     font-weight: bold;
     float: left;
     height: 29px;
}

.chromestyle:after{ /*Add margin between menu and rest of content in Firefox*/
content: "."; 
display: block; 
height: 0; 
clear: both; 
visibility: hidden;
}

.chromestyle ul{
border: 0px solid #BBB;
width: 100%;
background: url(chromebg.gif) center center repeat-x; /*THEME CHANGE HERE*/
padding: 4px 0;
margin: 0;
text-align: right; /*set value to "left", "center", or "right"*/
}

.chromestyle ul li{
display: inline;
}

.chromestyle ul li a{
color: #000000;
padding: 4px 7px;
margin: 0;
text-decoration: none;
border-left: 1px solid #DADADA;
}

.chromestyle ul li a:hover, .chromestyle ul li a.selected{ /*script dynamically adds a class of "selected" to the current active menu item*/
background: url(chromebg-over.gif) center center repeat-x; /*THEME CHANGE HERE*/
}

/* ######### Style for Drop Down Menu ######### */

.dropmenudiv{
position:absolute;
top: 0;
border: 1px solid #BBB; /*THEME CHANGE HERE*/
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
background-color: white;
width: 200px;
visibility: hidden;
}


.dropmenudiv a{
width: auto;
display: block;
text-indent: 3px;
border-bottom: 1px solid #BBB; /*THEME CHANGE HERE*/
padding: 2px 5px;
text-decoration: none;
font-weight: bold;
color: black;
}

* html .dropmenudiv a{ /*IE only hack*/
width: 100%;
}

.dropmenudiv a:hover{ /*THEME CHANGE HERE*/
background-color: #0000ff;
color: #fff200;
}

Following sample is from http://www.code-couch.com/jeff/snippets/general/tektips-navigation-example.html
is what I am trying to reference to create a template. But how do I how keep the state of Menu on each requested page any help is appreciated. The following menu is saved in a separate jsp file i.e. navs.jsp. I include this navigation jsp file in all of my files. Initially the drop down looks like:


Code:

. Ask.Jeeves 
. [+] Google.com 
. [+] Yahoo.com

Now clicking [+] in front of Google.com will look like.

Code:

. Ask.Jeeves 
. [-] Google.com 
     . Google.co.ie
     . Google.co.ie
     . [+] Google.co.nz 
. [+] Yahoo.com

Lets's say now if I click on Google.co.ie it takes me to sample.jsp and on this requested page (sample.jsp) how can I show the following menu hierarchy with Google.co.ie bold/underlined/colorchanged showing what menu content I clicked and am viewing the appropriate content i.e.


Code:

. Ask.Jeeves 
. [-] Google.com 
     . Google.co.ie
     . Google.co.ie
     . [+] Google.co.nz 
. [+] Yahoo.com

Same way clicking Google.com or Yahoo.com or Ask.Jeeves shows you the following hierarchy on the requested page with higlight/bold/colored the link we just selected. i.e.


Code:

. Ask.Jeeves 
. [+] Google.com 
. [+] Yahoo.com

Any time clicking on the menu takes me to some page but on that page I want to show th hierarchy of the menu all the way to which is recently clicked with different color setting.

Here is the source for the above:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
<meta http-equiv="content-language" content="en"/>
<title>Test Harness</title>

<style type="text/css">

ul li ul {display:none;list-style-type: none;}

#myNav li a:hover {
color: blue;
}

#myNav li a:active {
color: #FF0000;
background: #FFFFFF;
}

#myNav { list-style-image: url(page.GIF); }
</style>

<script type="text/javascript">
<!--
function initNav() {
	var navObj = document.getElementById('myNav');
	var ulCollection = navObj.getElementsByTagName('li');
	for (var loop = 0; loop < ulCollection.length; loop++) {
		if(ulCollection[loop].getElementsByTagName('ul').length > 0) {
			/* we have an LI that contains a UL */
			if (ulCollection[loop].getElementsByTagName('span').length > 0) {
				/* there is at least one SPAN tag present */
				ulCollection[loop].getElementsByTagName('span')[0].innerHTML = "[<a href=\"javascript://\" onclick=\"this.innerHTML=this.innerHTML=='+'?'-':'+';temp=this.parentNode.parentNode.getElementsByTagName('ul')[0].style;temp.display=temp.display=='block'?'none':'block';\">+</a>] ";
			}
		}
	}
}
window.onload = initNav;
//-->
</script>

</head>
<body>
<ul id="myNav">
	<li><a href="http://www.askjeeves.com">Ask.Jeeves</a></li>
	<li><span></span><a href="http://www.google.com">Google.com</a>
		<ul>
			<li><a href="http://www.google.co.uk">Google.co.uk</a></li>
			<li><a href="http://www.google.co.ie">Google.co.ie</a></li>
			<li><span></span><a href="http://www.google.co.nz">Google.co.nz</a>
			<ul>
			   <li>*3*</li>
			   <li>*4*</li>
			</ul>
</li>
		</ul>
	</li>

	<li><span></span><a href="http://www.yahoo.com">Yahoo.com</a>
		<ul>
			<li><a href="http://www.yahoo.co.uk">Yahoo.co.uk</a></li>
			<li><a href="http://www.yahoo.co.nz">Yahoo.co.nz</a></li>
		</ul>
	</li>
</ul>
</body>
</html>

Any help is really appreciated thanks.

EDIT:: Simplier way to write the question ^.^ :: When I scroll off the menu/link onto the first link in the submenu it stays, but when I mvoe down to the next item in the submenu it disappears.
(My drop down is vertically aligned on the left.)
(bits of the code that relate to the menu)

PHP Code:
.btn1 { position: absolute; left: 165px; top: 200px; } 
.btn2 { position: absolute; left: 165px; top: 240px; }
.btn3 { position: absolute; left: 165px; top: 280px; } 
.btn4 { position: absolute; left: 165px; top: 320px; }
.btn5 { position: absolute; left: 165px; top: 360px; } 
.btn6 { position: absolute; left: 165px; top: 400px; }
.btn7 { position: absolute; left: 165px; top: 440px; } 
.btn8 { position: absolute; left: 165px; top: 480px; }
.link1 { position: absolute; left: auto; top: 240px; }
.link2 { position: absolute; left: auto; top: 280px; }
.link3 { position: absolute; left: auto; top: 320px; }
.link4 { position: absolute; left: auto; top: 360px; }
.link5 { position: absolute; left: auto; top: 400px; }
.link6 { position: absolute; left: auto; top: 440px; }
.link7 { position: absolute; left: auto; top: 480px; }
.link8 { position: absolute; left: auto; top: 520px; }
.link9 { position: absolute; left: auto; top: 560px; }

#nav, #nav ul { padding: 0; margin: 0; list-style: none; }
#nav a { display: block; width: 100px; }
#nav li { width: 100px; }
#nav li ul { position: absolute; width: 100px; left: -9999px; display: none; top: 0; z-index: 3; }
#nav li:hover ul { display: block; left: 266px; z-index: 3; }
#nav li:over ul { display: block; left: 266px; z-index: 3; } 





PHP Code:
<ul id="nav">
  <li><a href="HOBmain.htm"><img class="btn1" src="../mainbtn.gif" width="100" height="38" alt="MainBtn"></a></li>
  <li><a href="HOBmain.htm"><img class="btn2" src="../blogbtn.gif" width="100" height="38" alt="BlogBtn"></a>
    <ul>
      <li class="link1"><a href=""><img src="../mbtn.gif" alt="bMainBtn"></a></li>
      <li class="link2"><a href="#"><img src="../anmbtn.gif" alt="bAnimeBtn"></a></li>
      <li class="link3"><a href="#"><img src="../mgabtn.gif" alt="bMangaBtn"></a></li>
      <li class="link4"><a href="#"><img src="../gmebtn.gif" alt="bGameBtn"></a></li>
      <li class="link5"><a href="#"><img src="../bookbtn.gif" alt="bBookBtn"></a></li>
    </ul>
  </li>
    <li><a href="HOBmuse.htm"><img class="btn3" src="../musebtn.gif" width="100" height="38" alt="MuseBtn"></a>
    <ul>
      <li class="link2"><a href="HOBmuse.htm"><img src="../mbtn.gif" alt="mMainBtn"></a></li>
      <li class="link3"><a href="HOBmuse.htm"><img src="../pmbtn.gif" alt="mPoemBtn"></a></li>
      <li class="link4"><a href="HOBmuse.htm"><img src="../stybtn.gif" alt="mStoryBtn"></a></li>
      <li class="link5"><a href="HOBmuse.htm"><img src="../drmbtn.gif" alt="mDreamBtn"></a></li>
    </ul>
  </li>
   <li><a href="HOBodd.htm"><img class="btn4" src="../oddbtn.gif" width="100" height="38" alt="ComicBtn"></a>
    <ul>
      <li class="link3"><a href="HOBodd.htm"><img src="../mbtn.gif" alt="cMainBtn"></a></li>
    </ul>
  </li>
   <li><a href="HOBart.htm"><img class="btn5" src="../artbtn.gif" width="100" height="38" alt="ArtBtn"></a>
    <ul>
      <li class="link4"><a href="HOBart.htm"><img src="../mbtn.gif" alt="aMainBtn"></a></li>
      <li class="link5"><a href="HOBart.htm"><img src="../recbtn.gif" alt="aRecentBtn"></a></li>
      <li class="link6"><a href="HOBart.htm"><img src="../gaibtn.gif" alt="aGaiaBtn"></a></li>
    </ul>
  </li>
   <li><a href="HOBpic.htm"><img class="btn6" src="../picbtn.gif" width="100" height="38" alt="PicsBtn"></a>
    <ul>
      <li class="link5"><a href="HOBpic.htm"><img src="../mbtn.gif" alt="pMainBtn"></a></li>
      <li class="link6"><a href="HOBpic.htm"><img src="../recbtn.gif" alt="pRecentBtn"></a></li>
    </ul>
  </li>
   <li><a href="HOBfaq.htm"><img class="btn7" src="../faqbtn.gif" width="100" height="38" alt="FaqBtn"></a></li>
   <li><a href="HOBcon.htm"><img class="btn8" src="../contactbtn.gif" width="100" height="38" alt="ContactBtn"></a> </li>
</ul> 





<script type="text/javascript" src="drop_down.js"></script>
the "nav" is referring to a bit of js, and this is in my header. Also not sure if it's correct, but I can worry about that later.
link: The Page

Hi all,

I've got a horizontal menu that is working just fine in every browser but IE 6 and 7. In IE it's almost there, except that the submenus will only appear one level deep. The menu is created with nested lists. The :hover functionality is simulated via JavaScript for IE 6. The IE developer toolbar shows the 3rd level menu is correctly being changed to display: block when its parent is hovered, and the border the dev toolbar draws even puts it in the correct place, it just doesn't actually appear.

You can find the page he
http://www.perceptes.com/topdog/

The CSS and JS (uses jQuery) can be found he
http://www.perceptes.com/topdog/css/screen.css
http://www.perceptes.com/topdog/css/ie.css (loaded with a conditional comment)
http://www.perceptes.com/topdog/js/tdps.js
http://www.perceptes.com/topdog/js/ie.js (loaded with a conditonal comment)

For a specific example of what I'm talking about, try hovering over the second item, Filters & Parts. This will give you another level with four choices. Each of those also has child elements, but when hovered over, the next level doesn't appear. Try it in something other than IE 6 or 7 to see how it's supposed to look.

Thanks very much in advance!

I am a photographer for a website and I know very little about anything other than basic html. With the website lady gone on a trip around the world for a year, I ended up being the person to attempt to modify our side menu to show an additional column of subcategories. I tinkered around with the code we had and I managed to get this to work in Firefox, however in IE7 the contents of the menu shift down a few pixels when you hover over a category.

To view my problem, go to scannerparts.biz

I've messed around with this for a few days and everything has become a big confusing mess so I have no choice but give in and ask for help. I thank anyone in advance for any assistance you can offer.

-Emerson

Here is the code:

hover.css

Code:

<!--
body {
	behavior: url(/images/csshover2.htc);
}

div#categorynav ul {margin: 0px; padding: 0px;}
.submenu {
	position: relative;
	margin: 0px;
	padding: 2px 0px;
	width: 178px;
}

div#categorynav ul.level1 li a {
	position: relative;
	display: block;
	text-decoration: none;
	margin: 0px;
	padding:  0px;
}

div#categorynav ul.level2 li {
	position: relative; 
	display: block;
	text-decoration: none;
	margin: 0px; 
	padding: 0px;
}

div#categorynav ul.level3 li {
	position: relative; 
	display: block;
	text-decoration: none;
	margin: 0px; 
	padding: 0px;
}

div#categorynav ul.level1 ul.level2 a {
	background-color: #000000;
	color: #fff;
	width: 178px;
	font-weight:normal;
	padding: 4px 4px 4px 14px;
}

div#categorynav ul.level2 ul.level3 a {
	background-color: #000000;
	color: #fff;
	width: 178px;
	font-weight:normal;
	padding: 4px 4px 4px 14px;
}

html>body div#categorynav ul.level1 ul.level2 a {
	width: auto;
	padding: 0px; 
	margin: 0px;
}
html>body div#categorynav ul.level2 ul.level3 a {
	width: auto;
	padding: 0px; 
	margin: 0px;
}

div#categorynav>ul a {width:auto; padding: 0px; margin: 0px;} 
div#categorynav ul ul {position: absolute; display: none; width: 100px; z-index:900; padding: 0px; margin: 0px;}
div#categorynav ul ul li {padding: 0px; margin: 0px;}
div#categorynav ul.level1 li.submenu:hover ul.level2 {
	display: block;
	list-style-image: none;
	list-style-type: none;

	
}
div#categorynav ul.level2 li.submenu:hover ul.level3 {
	display: block;
	list-style-image: none;
	list-style-type: none;

	
}

div#categorynav ul.level2 {
	top: 0px;	
	left: 178px;
	margin: 0px;
	padding: 0px;
	width:160px;

} 
div#categorynav ul.level2 li a:hover {
	background-color: #000000;
	color: red;

}

div#categorynav ul.level3 {
	top: 0px;	
	left: 178px;
	margin: 0px;
	padding: 0px;
	width:160px;

} 
div#categorynav ul.level3 li a:hover {
	background-color: #000000;
	color: red;


}

Abbreviated Header Source (abbreviated for max character requirement, I think I left all the vital stuff there)
Code:

<!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>

<ss:comment><link href="hover.css" type="text/css" rel="stylesheet" media="screen"/></ss:comment>
<link href="$store.images['hover.css']" type="text/css" rel="stylesheet" media="screen"/>


<style type="text/css">
<!--
/* Style Sheet */
body {
	margin-top: 10px;
	margin-right: 0px;
	margin-bottom: 30px;
	margin-left: 1px;
	background-image: url(/images/backgroundgray.jpg);
	background-repeat: repeat-x;
	background-position: center bottom;
}
html { height: 100%; margin-bottom: 1px; }
#outline{
	border :0px solid #ffffff;
	width :760px;
	}
#categories{
	background-color:#000000;
	color:#ffffff;
	text-decoration:none;
	text-align : left;
	display: block;
	padding : 5px 5px 1px 0px;
	font-weight :bold;
	font-size:9pt;
	font-family:<ss:value source=$font.paragraph.face/>;
        width :178px;
	padding: 0px; 
	}
#cat1{
	background-color:#000000;
	color: #ffffff;
	text-decoration:none;
	text-align: left;
	display: block;
	font-weight :normal;
	font-size: 9pt;
	font-family:<ss:value source=$font.paragraph.face/>;
        width: 178px;
	padding: 0px; 
	}
#cat1 a{
	background-color:#000000;
	color: #ffffff;
	text-decoration:none;
	text-align: left;
	display: block;
	font-weight: normal;
	font-size:9pt;
	font-family:<ss:value source=$font.paragraph.face/>;
        width :178px;
	padding: 0px; 
	}
#cat1 a:hover{
	background-color:#000000;
	color:#ff0000;
	text-decoration:none;
	text-align : left;
	display: block;
	font-weight: normal;
	font-size:9pt;
	font-family:<ss:value source=$font.paragraph.face/>;
        width :178px;
	padding: 0px; 
	}
.leftnav {
	background-color:#000000;
	color:#ffffff;
	text-decoration:none;
	font-weight :bold;
	font-size:9pt;
	font-family:<ss:value source=$font.paragraph.face/>;
	padding : 2px 5px 1px 0px;
	}
.leftnav A:link {
	background-color:#000000;
	border-bottom : 1px solid #666666;
	color:#ffffff;
	text-decoration:none;
	text-align : left;

	display: block;
	padding : 2px 5px 1px 0px;
	font-weight :bold;
	}
.leftnav A:visited {
	background-color:#000000;
	border-bottom : 1px solid #666666;
	color:#ffffff;
	text-decoration:none;
	text-align : left;
	display: block;
	padding : 2px 5px 1px 0px;
	font-weight :bold;
	}
.leftnav A:hover {
	background-color:#000000;
	border-bottom : 1px solid #666666;
	color:#ff0000;
	text-decoration:none;
	text-align : left;
	display: block;
	padding : 2px 5px 1px 0px;
	font-weight :bold;
	}
.leftnav A:active {
	background-color:#000000;
	border-bottom : 1px solid #666666;
	color:#ffffff;
	text-decoration:none;
	text-align : left;
	display: block;
	padding : 2px 5px 1px 0px;
	font-weight :bold;
	}
A:link {text-decoration:underline;color:<ss:value source=$font.paragraph.color/>;}
A:visited {text-decoration:underline;color:<ss:value source=$font.paragraph.color/>;}
A:hover {text-decoration:none;color:<ss:value source=$font.paragraph.color/>;}
A:active {text-decoration:underline;color:<ss:value source=$font.paragraph.color/>;}

.content {font-family:<ss:value source=$font.paragraph.face/>
;color:<ss:value source=$font.paragraph.color/>;}

.title {font-size:10pt;font-weight:bold;font-family:<ss:value source=$font.paragraph.face/>
;color:#ffffff;}

.footer {font-size:9pt;font-family:<ss:value source=$font.paragraph.face/>
;color:<ss:value source=$font.paragraph.color/>;}

-->
</style>
</head>

<body>
<center>
<div id="outline">
<table width="760" border="0" cellspacing="0" cellpadding="0">
<!-- banner image -->
	<tr valign="top"><td colspan="4"><a href="(URL address blocked: See forum rules)"><ss:image source="$templateSet.images['header.jpg']" border="0"/></a></td></tr>

	<tr valign="top">
<!-- left nav -->
		<td bgcolor="#000000">&nbsp;&nbsp;</td>
		<td width="175" bgcolor="#000000">
			<div class="leftnav">
		<!-- store logo -->
			</div>
		
			<div class="leftnav">
				<div style="border-bottom : 0px solid #666666;">&nbsp;</div>
			<!-- home -->
				</div>
			
			<!-- categories -->
<p><font face="Arial,Helvetica,sans-serif" size="2" color="white"><b>Parts and Products:</b></font></p>
<div id="categorynav">
<div id="categories">
	<ul class="level1">                        			 
	<ss:foreach item="category" within="$catalog.categoryList()">
	<ss:sortby item="categorypriority" direction="asc"/>
	<ss:if test="$category.treeLevel == '1'">
	<ss:set name="hasSub" value="0"/>
		<ss:foreach item="subcategory" within="$category.childrenToDepth(1)">

		<ss:set name="hasSub" value="1"/>
		</ss:foreach>
                <li class="submenu">
		<div id="cat1"><ss:link source="$category"/></div>
			<ss:if test="$hasSub == '1'">
			<ul class="level2">
			<ss:foreach item="subcategory" within="$category.childrenToDepth(1)">
			<ss:sortby item="categorypriority" direction="asc"/>

			<ss:if test="$category.treeLevel == '2'">
			<ss:set name="hasSub" value="1"/>
			<ss:foreach item="subcategory" within="$category.childrenToDepth(1)">

                        		<ss:set name="hasSub" value="1"/></ss:foreach></ss:if>
</li>
                                 	<li class="submenu">
					<div id="cat1"><ss:link source="$subcategory"/></div>
						<ss:if test="$hasSub == '1'">
						<ul class="level3">
						<ss:foreach item="subcategory" within="$subcategory.childrenToDepth(1)">
						<li><ss:link source="$subcategory" title="$subcategory.name"/></li>
						</ss:foreach>
						</ul>
						</ss:if>
						</ss:foreach>
						</ul>
						</ss:if></ss:foreach>

					</li>

					</ss:if></ss:if></ss:foreach>
				<br>                      
			 </ul>
			</div> 
			</div>

I working on a CSS to display a round-shouldered-tab menu. My result is acceptable:
http://rickduley.webs.com/roundShoulderTabMenu.jpg
except for the fact that the tabs are set below the menuBar on which the are supposed to display.

I have run out of ideas. Would someone please set me on the right path?
Thanks.

P.S.: the code is at
http://rickduley.webs.com/roundShoulderTabMenu.zip.kgb -
you have to delete the 'dot key gee bee' suffix.

I want to make it so that when you go to type something into the textbox(lastname or firstname) the menu stays open. right now if you try and type something into the textbox the menu closes but you still keep right on writing and then go back into the menu and click the submit button. I also want it so that you can press the <enter> key on your keyboard and it will submit the search query that you are working on.
if there is a better way of doing this all please let me know

this is menu.php
PHP Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>BHI and Roth's Website menu</title>
<?php
<link rel="stylesheet" type="text/css" href="menu_css.css" />
</head>
<BODY STYLE="background-color:transparent">

<ul class="pureCssMenu pureCssMenum">
    <li class="pureCssMenui"><a class="pureCssMenui" href="home.php" target="showframe">Home</a></li>
    <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Fill-in a form</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul class="pureCssMenum">
        <li class="pureCssMenui"><a class="pureCssMenui" href="form_bhi_hoac.php" target="showframe">102HOAC</a></li>
        <li class="pureCssMenui"><a class="pureCssMenui" href="form_for_adding_email_addresses.php" target="showframe">Email database</a></li>
        <li class="pureCssMenui"><a class="pureCssMenui" href="form_support_application.php" target="showframe">Support Application</a></li>
    </ul>
    <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
    <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>View the form data</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul class="pureCssMenum">
        <li class="pureCssMenui"><a class="pureCssMenui" href="view_102hoac.php" target="showframe">102HOAC</a></li>
        <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Search Addressbook by:</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
        <ul class="pureCssMenum">
            
                
                <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Last Name:</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
                <ul class="pureCssMenum">
                    <li class="pureCssMenui"><form class="pureCssMenui" action="lastname_search.php" method="post" target="showframe"><input type="text" name="lastname" size="30" /><input type="submit" align="right" value="Search" /></form></li>
                </ul>
                <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
            

            
                <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>First Name:</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
                <ul class="pureCssMenum">
                    <li class="pureCssMenui"><form class="pureCssMenui" action="firstname_search.php" method="post" target="showframe"><input type="text" name="firstname" size="30" /><input type="submit" align="right" value="Search" /></form></li>
                </ul>
                <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
            
        </ul>
        

        <li class="pureCssMenui"><a class="pureCssMenui" href="sa.php" target="showframe">Support Application</a></li>
    </ul>
    <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
    <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Resources</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul class="pureCssMenui">
        <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>View BHI Brochure -></span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
        <ul class="pureCssMenum">
            <li class="pureCssMenui"><a class="pureCssMenui" href="bhi_brochure_feb_08.pdf" target="_blank">in .pdf format</a></li>
            <li class="pureCssMenui"><a class="pureCssMenui" href="bhi_brochure_feb_08.swf" target="_blank">in .swf format</a></li>
        </ul>
    </ul>
    <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="gallery.html" target="showframe">Photo Gallery</a></li>
    <li class="pureCssMenui"><a class="pureCssMenui" href="edit.php" target="showframe">Edit account information</a></li>
    <li class="pureCssMenui"><a class="pureCssMenui" href="logout.php" target="_top">Logout</a></li>
</ul>

</body>
</html> 


<?php
}
          }
          }
else
//if the cookie does not exist, they are taken to the login screen
{
header("Location: login.php");
}
?> 
</html> 





And this is menu_css.css
Code:

#pcm{display:none;}
ul.pureCssMenu ul{display:none}
ul.pureCssMenu li:hover>ul{display:block}
ul.pureCssMenu ul{position: absolute;left:0px;top:100%;}
ul.pureCssMenu ul ul{position: absolute;left:100%;top:0px;}
ul.pureCssMenu,ul.pureCssMenu ul {
	margin:0px;
	list-style:none;
	padding:0px 2px 2px 0px;
	background-color:#990033;
	background-repeat:repeat;
	border-color:#FFEE00;
	border-width:1px;
	border-style:solid;
}
ul.pureCssMenu table {border-collapse:collapse}ul.pureCssMenu {
	display:block;
	zoom:1;
	float: left;
}
ul.pureCssMenu ul{
	width:210px;/*width:138.6px;*/
}
ul.pureCssMenu li{
	display:block;
	margin:2px 0px 0px 2px;
	font-size:0px;
}
ul.pureCssMenu a:active, ul.pureCssMenu a:focus {
outline-style:none;
}
ul.pureCssMenu a, ul.pureCssMenu li.dis a:hover, ul.pureCssMenu li.sep a:hover {
	display:block;
	vertical-align:middle;
	background-color:#990033;
	border-width:0px;
	border-color:#990033;
	border-style:solid;
	text-align:center;
	text-decoration:none;
	padding:4px;
	_padding-left:4;
	font:normal 11.5px Verdana;
	color: #FFEE00;
	text-decoration:none;
	cursor:default;
}
ul.pureCssMenu span{
	overflow:hidden;
}
ul.pureCssMenu li {
	float:left;
}
ul.pureCssMenu ul li {
	float:none;
}
ul.pureCssMenu ul a {
	text-align:left;
	white-space:nowrap;
}
ul.pureCssMenu li.sep{
	text-align:center;
	padding:0px;
	line-height:0;
	height:100%;
}
ul.pureCssMenu li.sep span{
	float:none;
	padding-right:0;
	width:5;
	height:16;
	display:inline-block;
	background-color:#BB99BB;
	background-image:none;
}
ul.pureCssMenu ul li.sep span{
	width:80%;
	height:3;
}
ul.pureCssMenu li:hover{
	position:relative;
}
ul.pureCssMenu li:hover>a{
	background-color:#FFEE00;
	border-color:#0099cc;
	border-style:solid;
	font:normal 11.5px Verdana;
	color: #990033;
	text-decoration:none;
}
ul.pureCssMenu li a:hover{
	position:relative;
	background-color:#FFEE00;
	border-color:#990033;
	border-style:solid;
	font:normal 11.5px Verdana;
	color: #990033;
	text-decoration:none;
}
ul.pureCssMenu li.dis a {
	color: #AAAAAA !important;
}

Hi all,

The following CSS and HTML work fine in Mozilla, Netscape and Firefox.

It can be viewed in action at:
http://www.sirfragalot.com/wikindx2/

(choose the 'chocolate vanilla fudge sundae' from the Wikindx/preferences menu.)

I have two questions:

1/ I'm aware that Konqueror does not support CSS drop-downs. It doesn't concern me as I've programmed a way around it. However, the menu items occasionally stack up vertically on the left side of the browser window: they're supposed to be horizontal. This stacking and subsequent un-stacking seems to be quite random. What's the fix?

2/ In IE, the drop-downs are rendered from the bottom right corner of the originating top menu item (they should be directly underneath). What is the fix?

HTML CODE:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<!-- begin header template (+ 3 lines up!) -->
<head>
<title>WIKINDX</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="chocolate.css" type="text/css" />
<script type="text/javascript"><!--//--><![CDATA[//><!--

sfHover = function() {
   var sfEls = document.getElementById("nav").getElementsByTagName("LI");
   for (var i=0; i<sfEls.length; i++) {
      sfEls[i].onmouseover=function() {
         this.className+=" sfhover";
      }
      sfEls[i].onmouseout=function() {
         this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
      }
   }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

//--><!]]></script>
</head>
<body>
<!-- begin menue template -->
<table class="menuTable" border="0" cellspacing="0" cellpadding="0" align="left">
<tr class="" align="left" valign="top">
<td class="" align="right" valign="top">

<ul id="nav">
  <li><a class="menuLi" href="index.php?action=frontNoMenu">Wikindx</a>
          <ul>
            <li><a class="menu" href="index.php">Home</a></li>
            <li><a class="menu" href="index.php?action=preferencesDisplay">Preferences</a></li>
          </ul>
  </li>
  <li><a class="menuLi" href="index.php?action=fileNoMenu">File</a>

          <ul>
            <li><a class="menu" href="index.php?action=exportRtf">Export RTF</a></li>
            <li><a class="menu" href="index.php?action=exportBibtex">Export BibTeX</a></li>
            <li><a class="menu" href="index.php?action=showFiles">Show Files</a></li>
          </ul>
  </li>
  <li><a class="menuLi" href="index.php?action=editNoMenu">Edit</a>

          <ul>
            <li><a class="menu" href="index.php?action=editCreator">Creator</a></li>
            <li><a class="menu" href="index.php?action=editJournal">Journal</a></li>
            <li><a class="menu" href="index.php?action=editPublisher">Publisher</a></li>
          </ul>
  </li>
  <li><a class="menuLi" href="index.php?action=resourceNoMenu">Resources</a>

          <ul>
            <li><a class="menu" href="index.php?action=listDisplay">List</a></li>
            <li><a class="menu" href="index.php?action=searchDisplay">Search</a></li>
            <li><a class="menu" href="index.php?action=selectDisplay">Select</a></li>
            <li><a class="menu" href="index.php?action=resourceNew">New</a></li>
          </ul>
  </li>

  <li><a class="menuLi" href="index.php?action=textNoMenu">Text</a>
          <ul>
            <li><a class="menu" href="index.php?action=allMusings">Musings</a></li>
            <li><a class="menu" href="index.php?action=randomMusing">Random Musing</a></li>
            <li><a class="menu" href="index.php?action=allParaphrases">Paraphrases</a></li>
            <li><a class="menu" href="index.php?action=randomParaphrase">Random Paraphrase</a></li>

            <li><a class="menu" href="index.php?action=allQuotes">Quotes</a></li>
            <li><a class="menu" href="index.php?action=randomQuote">Random Quote</a></li>
          </ul>
  </li>
  <li><a class="menuLi" href="index.php?action=adminNoMenu">Admin</a>
          <ul>
            <li><a class="menu" href="index.php?action=superadminLogonDisplay">Logon</a></li>

          </ul>
  </li>
  <li><a class="menuLi" href="index.php?action=helpNoMenu">Help</a>
          <ul>
            <li><a class="menu" href="index.php?action=helpDisplay">Wikindx Help</a></li>
            <li><a class="menu" href="index.php?action=aboutWikindx">About Wikindx</a></li>
          </ul>

  </li>
</ul>
</td>
</tr>
</table>
<br />
<!-- end menu template -->
</body>
<!-- end footer template (+ 1 line down!) -->
</html>

CSS CODE:
Code:

body {
   background   :   #74664a;
   font-family   :   sans-serif;
   font-size   :   0.9em;
   color      :   #f6eedf;
}
/* SuckerFish CSS drop down style */
#nav, #nav ul {
   padding: 0;
   margin: 0;
   list-style: none;
}

#nav a {
   display: block;
   width: 7em;
}

#nav li {
   float: left;
   width: 7em;
   background   :   red;
}
#nav li ul {
   position: absolute;
   width:  7em;
   left: -999em;
}
#nav li:hover ul, #nav li.sfhover ul {
   left: auto;
}
/* End Suckerfish Style */


/* Standard links such as top menu links */
A:visited, A:link, A:active {
   text-decoration   :   none;
   color      :   #74664a;
   background   :   #efd197;
   border-left      :   1px groove #f6eedf;
   border-top      :   1px groove #f6eedf;
   border-right      :   1px groove #f6eedf;
   border-bottom      :   1px groove #f6eedf;
   font-size   :   0.9em;
}
A:hover {
   text-decoration   :   none;
   background   :   #f6eedf;
   color      :   #74664a;
   border-left      :   1px groove #f6eedf;
   border-top      :   1px groove #f6eedf;
   border-right      :   1px groove #f6eedf;
   border-bottom      :   1px groove #f6eedf;
   font-size   :   0.9em;
}
/* .menu = submenu links */
A.menu:visited, A.menu:link, A.menu:active {
   text-decoration   :   none;
   color      :   #74664a;
   display      :   block;
   border-bottom   : 1px solid #f6eedf;
   width      :   6em;
   background   :   #efd197;
   font-size   :   0.9em;
   text-align   :   left;
}
A.menu:hover {
   text-decoration   :   none;
   background   :   #f6eedf;
   display    :   block;
   color      :   #74664a;
   border-bottom   : 1px solid #f6eedf;
   width      :   6em;
   font-size   :   0.9em;
   text-align   :   left;
}
/* normal links and paging links */
A.link:visited, A.link:link, A.link:active, A.page:visited, A.page:link, A.page.active {
   text-decoration   :   none;
   color      :   red;
   background   :   transparent;
   border      :   none;
}
A.link:hover, A.page:hover {
   text-decoration   :   none;
   background   :   #f6eedf;
   color      :   #74664a;
   border      :   none;
   border      :   none;
}
/* resource links for resource URLs */
A.rLink:visited, A.rLink:link, A.rLink:active {
   text-decoration   :   none;
   background   :   transparent;
   color      :   #f6eedf;
   border      :   none;
}
A.rLink:hover {
   text-decoration   :   none;
   background   :   #f6eedf;
   color      :   #74664a;
   border      :   none;
   border      :   none;
}
/* image links */
A.imgLink:visited, A.imgLink:link, A.imgLink:active {
   text-decoration   :   none;
   background   :   transparent;
   border      :   none;
}
A.imgLink:hover {
   text-decoration   :   none;
   background   :   transparent;
   border      :   none;
}
/*****
*  .titleTable:  the table containing the title bar
*****/
.titleTable {
   width      :   90%;
}
/*****
*  .menuTable:  the table containing the drop-down menus
*****/
.menuTable {
   margin      :   0 0 0 5%;
}
/*****
*  .menuLi:  text-color in list items of the drop-down menus
*****/
.menuLi {
   color      :   black;
}
/*****
*  .mainTable:  the table containing the main content of WIKINDX
*****/
.mainTable {
   border      :   none;
   width      :   90%;
   padding      :   0.2em;
   clear      :   both;
}
/*****
*  redefine HTML headings - see /core/html/MISC.php
*****/
h1, h2, h3, h4   {
   color      :   #f6eedf;
   margin      :   0 0 1em 0;
}
/*****
*  .footerFooter:  footer information at end of script - part of a table
*****/
.footerTable  {
        font-size   :   0.6em;
   color      :   #f6eedf;
   width      :   90%;
}
/*****
* .error: <p>error messages</p>
*****/
.error {
   background   :   red;
   color      :   black;
}
/*****
* .success: <p>success messages</p>
*****/
.success {
   background   :   #33ff00;
   color      :   black;
}
/*****
*   .small: small text
*****/
.small, .hint {
   font-size   :   0.8em;
}
/*****
*   .hint: text hints given to provide further information usually on form input.  Often used in conjunction
*      with .small and usually the class of <span>....</span>
*****/
.hint   {
   color      :   #f6eedf;
}
/*****
*   alternate background colours and font sizes for <td>resources</td> in a bibliographic list
*****/
.alternate1 {
/*   background   :   #efd197; */
/*   background   :   #f8efdf; */
   border      :   2px groove #583b04;
   font-size   :   0.9em;
   color      :   #f6eedf;
}
.alternate2 {
/*   background   :   #ede5d8; */
/*   background   :   #f6eedf; */
   border      :   2px groove #583b04;
   font-size   :   0.9em;
   color      :   #f6eedf;
}
/*****
*   .highlight:   highlight <span>search terms</span> in text
*****/
.highlight {
   color      :   #583b04;
   background   :   yellow;
}
/*****
*   .required:   highlighting for <span>required</span> form input elements (asterisk).
*****/
.required {
   color      :   red;
}

How easy is it to create one of these where when you hover over a link a menu appears underneath?

Ok I am creating a CSS/Javascript Horizontal drop down menu and everything looks great except when I go down and highlight items on my submenu the styles go away on the Menu Item Selected, how can I have those attributes maintain when I go on it's sub elements?

Thanks alot

Seth

Code:

<div id="Nav">
                    <ul class="menu">
                        <li>
                            <a href="#">
                                Home
                            </a>
                        </li>
                        <li>
                            <a href="#" onclick="javascript:showlayer('sm_1')">
                                Profile
                            </a>
                            <ul class="submenu" id="sm_1">
                                <li><a href="#">Portfolio</a></li>
                                <li><a href="#">Resume</a></li>
                                <li><a href="#">About Me</a></li>
                            </ul>
                        </li>
                        <li>
                            <a href="#">
                                Contact
                            </a>
                        </li>
                        <li>
                            <a href="#" onclick="javascript:showlayer('sm_2')">
                                Login
                            </a>
                            <ul class="submenu" id="sm_2">
                                <li><a href="#">Friends</a></li>
                                <li><a href="#">Family</a></li>
                                <li><a href="#">Admin</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>

Code:

ul, li
{
	margin:0; border:0; padding:0; list-style:none;
}
#Nav
{
	font-size:11px;
	color:#3b5d14;
	font-weight:bold;
	padding:4px;
	height:30px;
	font-family: Lucida Sans;
}
#Nav .menu li 
{
	/*background:url(Images/Light/Left-Menu.png) left top no-repeat;*/
	height:30px;
	float:left;
	margin-right:10px;
}
#Nav .menu li a
{
	color:#F1F1F1;
	width: 75px;
	text-decoration:none;
	padding:0 10px;
	height:30px;
	line-height:30px;
	display:block;
	float:left;
	padding:0 26px 0 10px;
	background:url(Images/Light/Right-Menu-Off.png) right top no-repeat;
	font-family: Lucida Sans;
}


#Nav .menu li a:hover
{
	color:#666666;
	background: url(Images/Light/MenuRight.png) right top no-repeat;
}

#Nav .menu li:hover
{
		
	background: url(Images/Light/Menu-Hover.png) left top no-repeat;
}

#Nav ul .submenu 
{
	border:solid 1px #7ea3bb;
	margin-left: auto;
	margin-right: auto;
	/*border-top:none;*/
	background:#FFFFFF;
	position:relative;
	top:1px;
	width:100px;
	padding:6px 0;
	clear:both;
	z-index:2;
	display:none;
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90);opacity:.95
}
#Nav ul .submenu li
{
	background:none;
	display:block;
	float:none;
	margin:0 6px;
	border:0;
	height:auto;
	line-height:normal;
	/*border-top:solid 1px #DEDEDE;*/
}
#Nav .submenu li a
{
	background:none;
	display:block;
	float:none;
	padding:6px 6px;
	margin:0;
	border:0;
	height:auto;
	color:#105cbe;
	line-height:normal;
}
#Nav .submenu li a:hover
{
	background:#ebf4fa;
}

i m having problem in displaying menu and sub menu. pls check the code.

HTML

<html>
<head>
<title> List of Hospital values
</title>
<link href="new.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<ul id="navbar">
<li><a href="##">IPD Maintenance</a>
<ul>
<li><a href="#">Registration</a></li>
<li><a href="#">Diagnose</a></li>
<li><a href="#">Laboratary Test</a></li>
</ul>
</li>


<li><a href="#">OPD Maintenance</a>
<ul>
<li><a href="#">Registration</a></li>
<li><a href="#">Diagnose</a></li>
<li><a href="#">Laboratary Test</a></li>
<li><a href="#">Admission</a></li>
<li><a href="#">Services </a></li>
</ul>
</li>

<li><a href="#">Donation Management</a>
<ul>
<li><a href="">Donor detail</a></li>
<li><a href="">Lab Test detail</a></li>
<li><a href="#">Donor Medication</a></li>
</ul>
</li>

<li><a href="#">Billing</a>
<ul>
<li><a href="#">IPD billing</a></li>
<li><a href="#">OPD billing</a></li>
</ul>
</li>

<li> <a href="#">Administrative Task</a>
<ul>
<li><a href="#">Manage user</a></li>
<ul>
<li><a href="#">Add User</a></li>
<li><a href="#">Delete User</a></li>
</ul>


<li><a href="#">Manage Doctors</a></li>
<ul>
<li><a href="#">Edit Doctor</a></li>
<li><a href="#">Add Doctor</a></li>
<li><a href="#">Delete Doctor</a></li>
</ul>

<li><a href="#">Manage Staff</a></li>
<ul>
<li><a href="#">Edit Staff</a></li>
<li><a href="#">Add Staff</a></li>
<li><a href="#">Delete Staff</a></li>
</ul>

<li><a href="#">Manage Departments</a></li>
<ul>
<li><a href="##">Add Department</a></li>
<li><a href="#">Delete Department</a></li>
<li><a href="#">Edit Department</a></li>
</ul>

<li><a href="#">Manage Rooms</a></li>
<ul>
<li><a href="#">Add Room</a></li>
<li><a href="#">Delete Room</a></li>
<li><a href="#">Edit Room</a></li>
</ul>
</ul>
</li>

<li><a href="#">Laboratory</a>
<ul>
<li><a href="">Laboratory detail</a></li>
<li><a href="">Lab Test detail</a></li>
</ul>
</li>

<li><a href="#">Organ Management</a>
<ul>
<li><a href="">Laboratory detail</a></li>
<li><a href="">Lab Test detail</a></li>
</ul>
</li>

<li><a href="#">Blood Management</a>
<ul>
<li><a href="">Blood Taken</a></li>
<ul>
<li><a href="">Hospitals</a></li>
<li><a href="">Donors</a></li>
</ul>
<li><a href="">Blood Endorsed</a></li>
<ul>
<li><a href="">Persons</a></li>
<li><a href="">Hospitals</a></li>
<li><a href="">IPD</a></li>
</ul>
</ul>
</li>

<li><a href="#">Emergency Services</a>
<ul>
<li><a href="">Estaff Detail</a></li>
<li><a href="">Add Estaff</a></li>
<li><a href="">Delete Estaff Detail</a></li>
<li><a href="">Edit Estaff Detail</a></li>
<li><a href="">Ambulance Detail</a></li>
<li><a href="">Ambulance Route</a></li>
</ul>
</li>

<li><a href="#">Inventory</a>
<ul>
<li><a href="">Suppliers</a></li>
<li><a href="">Purchase Receipt</a></li>
<li><a href="">Purchase return receipt</a></li>
<li><a href="">Sales Receipt</a></li>
<li><a href="">Sales Return Receipt</a></li>
</ul>
</li>
</ul>
</body>
</html>

AND THE CSS FILE IS AS FOLLOWING

#navbar {
margin: 0;
padding: 0;
height: 1em; }
#navbar li {
list-style: none;
float: left; }
#navbar li a {
display: block;
padding: 3px 8px;
background-color: #5e8ce9;
color: #fff;
text-decoration: none; }

#navbar li ul {
display: none;
width: 10em; /* Width to help Opera out */
background-color: #69f;}

#navbar li:hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0; }
#navbar li:hover li {
float: none; }
#navbar li:hover li a {
background-color: #69f;
border-bottom: 1px solid #fff;
color: #000; }
#navbar li li a:hover {
background-color: #8db3ff; }


WAITING FOR YOUR HELP

Hey guys,

New to the forum. Mainly came on here to get help with my nav bar. It works perfectly in FF and IE 8.07+, but the problem it with IE8.06, where it doesn't show at all. Not too worried about pre-8.06, only a small amount of my page hits comes from below that version.

I've spent ages looking for a problem, but can't find where I've went wrong. There's may be some superfluous stuff in there that I've added to try and fix the problem.. Please help? =)

------------------------

Code:

#PageList1 ul {
height: 1.5em;
overflow:hidden;
margin: 10px -10px 5px;
width: 100%;
padding: 10px;
background-image:url('http://4.bp.blogspot.com/-WKkxGKrRVcw/TbFWFn_2VxI/AAAAAAAAAis/NKf1k3sO9A8/s1600/nav_bg2.jpg');
background-repeat:repeat-x;
}

#PageList1 li {
height: 1.5em;
list-style-type:none;
float:left;
}

#PageList1 li a {
display:block;
height: 1.5em;
width:auto;
clear:left;
font-weight:bold;
font-size:9pt;
line-height: 0.5em;
margin: -9px 0px -23px;
color: #ffffff;
background-image:url('http://3.bp.blogspot.com/_vhqPwC7csIg/TSUQG6Q3tfI/AAAAAAAAAYU/5ceiGi8na3s/s1600/gradient40px.jpg');
background-repeat:repeat-x;
text-align:center;
text-decoration:none;

padding: 10px 10px 15px;

	border: 1px solid #ccc;
	border-right: 0px solid #ccc;
	border-bottom: 0px solid #ccc;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
    -moz-box-shadow: 3px 3px 4px #000;
    -webkit-box-shadow: 3px 3px 4px #000;
    box-shadow: 3px 3px 4px #000;
}
#PageList1 li a:hover, #PageList1 li a.sfhover {
background:transparent;
font-weight:bold;
color: white;
}

#PageList1 li ul {
	left: -999em;
        position: absolute;
	width: 13em; /* Width to help Opera out */
height: auto;	
background-color: #ccc; 
colour:#fff; 
clear: left;
}

#PageList1 li:hover ul, #PageList1 li.sfhover ul {
	left: auto;
	margin: 8px -80px 0px;
width: 13em;
height: auto;
background: #ccc;

}

#PageList1 li:hover li a, #PageList1 li.sfhover li a {
background:#ccc;
	border: 0px solid #ccc;
	border-right: 0px solid #ccc;
	border-bottom: 0px solid #fffccc;
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	border-radius: 0px;
padding: 0px;
margin: 5px 0px 0px;
    -moz-box-shadow: 0px 0px 0px #000;
    -webkit-box-shadow: 0px 0px 0px #000;
    box-shadow: 0px 0px 0px #000;
	color: #000; 
}
#PageList1 li li a:hover, #PageList1 li li a.sfhover {
	background-color: #ccc; 
color: #fff;}

<script type='text/javascript'>
sfHover = function() {
	var sfEls = document.getElementById("PageList1").getElementsByTagName("LI");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" sfhover";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>

Howdy.

Take a look here.

The menu is dropping behind the div for the body section in IE.

I've tried mucking with the z-index, but it doesn't seem to make a difference.

Here's the menu code;
Code:

#menu {
width:780px;
height:28px;
background: #CCCCCC url(images/menu_img.gif) no-repeat center top;
}

ul#nav {
  padding: 0;
  margin:0 25px 0 25px;
  list-style: none;
  }
  
li.navB {
  float: left;
  position: relative;
  width: 230px;
  margin:7px 0 7px 0;
  font:bold 12px arial, verdana, sans-serif;
  text-decoration:none;
  color:#2F60C0;
  }
  
li ul {
  display: none;
  position: absolute; 
  top: 15px;
  left: 0;
  padding:5px;
  width:100px;
  list-style:none;
  margin:0;
  z-index:3;
  }
  
li ul li{
  padding:2px;
  width:100px;
  list-style:none;
  margin:auto;
  }
	
li:hover ul, li.over ul{ 
  display: block;
  background:white;
  border:1px solid #333333;
  width:100px;
  padding:5px;
  position:absolute;
}

and the body code

Code:

.product_container {
width:720px;
margin:auto;
margin-top:4px;
margin-bottom:4px;
border:1px solid black;
min-height:270px;
position:relative;
clear:both;
z-index:1;
}

.product_info {
float:left;
width:500px;
position:relative;
z-index:1;
}

.product_image {
float:right;
margin:auto;
margin-top:20px;
margin-bottom:20px;
position:relative;
font:10px arial;
color:#666666;
text-align:center;
z-index:1;
}

.clear {
clear:both;
margin-top:-1px;
height:1px;
overflow:hidden;
}

Any thoughts?

Thanks

I have been tasked with building a CSS drop down menu system. I have worked out I can use a hover event to invoke the drop-downs (and hide them again). However. How would I invoke one and keep it visible if they went down to the sub-menu rather than just disappearing because they left the element the hover is applied to?