CSS - Css Drop Down Menu Problems Over Flash

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;
}

I want to add a css drop shadow on flash object (embedded using the object tag) that works with Firefox, Internet Explorer and Safari... anyone know how I can code that or know where there examples of it?

TIA

We've recently redesigned our company's website and went live with it. Unfortunately we've just noticed on the pages with Flash on them, the CSS drop-downs go behind the text, flash objects, etc.

Does anyone know how to fix this? You can see what is happening on these pages.

http://www.callan.co.uk/locate_school.php
http://www.callan.co.uk/callanschool_student_pgs/callan_english_lessons_video.php

You'll notice in the second link the far right drop-down menu doesn't go behind the right side navigation div. I think this is because it's the flash causing it and there is no Flash under that last drop-down menu.

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

I have a site with a menu that works perfectly in every single browser except IE6. Instead of the menu going over top of the flash, it enlarges the menu bar and just displays within that. I've tried SWFObject, as well as wmode=transparent and opaque for the flash movie, and they work great for all browsers other than IE6.

Does anyone know a fix for this?

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 have a drop down menu that drops behind my flash element.
is there a way to push the flash behind the menu in CSS?

Hi all,

I have a problem with a site I am developing. I am using CSS and all was well until I placed a Flash Movie on the homepage.

The general layout is as follows:

Code:

<div id="wrapper">
   <div id="banner"></div>
   <div id="nav">links etc</div>
   <div id="content">Content text etc</div>
   <div id="flashMovie">Flash movie here</div>
   <div id="footer"></div>
</div>

The 'nav' div uses a ProjectSeven popmenu which works fine. It's Z-index is something like 2000. The dropdown menu hides behind the 'flashMovie' layer every time, but appears in front of the content layer???

I have tried messing with the z-index of the 'flashMovie' div but to no avail. I have tried absolute positioning, floats, everything I can think of but with no success.

Any advice on what the problem could be would be greatly appreciated. I apologise for not having the actual site online, but Its under development on my other machine.

Thanks in advance,
Duncan

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>

Hi, folks. I'm running into a pretty serious problem to which I'm really, really hoping someone will know a solution.

We use a menu system on our site which is made up of layers. It provides for flyout-hierarchical menus, and up until now has caused me no grief.

However, now that I've embedded a flash movie onto a particular page the layers that comprise the flyout menu items are hidden beneath the Flash movie.

I've tried putting the object tag inside a div and setting the z-index of the div to 1 (and also to -1) but that didn't work.

Can anyone take a look and let me know if they have any ideas?

http://www.unbc.ca/test.html

Cheers and TIA,

Pablo

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;
}