Menu troubles

[DeeBs]

Posted this in the Browser issue forum, but the forum seems to be fairly inactive, ao I thought I'd ask here.

I have a menu that won't display in ie. It works fine in Firebird, but doesn't come up at all in internet explorer.

http://www.20hgamer.tk

Thanks for any help...

Oops, forgot to post css etc.

~DB

#menudiv a {
	color:#ffffff;
	font-size:1em;
	text-decoration:none;
	}
#menudiv ul {
	position:absolute;
	left:0;top:4.6em;
	list-style:none;
	padding:0;
	margin:0;
	border:none;
	}
#menudiv li {
	position: relative;
	margin:0;
	width:6.4em;
  	}
#menudiv ul>li {
	width:6.4em;
	}
#menudiv li a {
	display:block;
	padding:5px 5px 5px 0.5em;
	border-left:10px solid #4c4c4c;
	border-right:10px solid #757575;
	background-color:#828282;
	color:#fff;
	text-decoration:none;
	width:100%;
	}

#menudiv li a:hover {
	border-left: 10px solid #590404;
	border-right: 10px solid #7d0303;
	background-color: #ae3b3b;
	color: #fff;
	}
#menudiv li ul {
	display:none;
	position:absolute;
	top:0;
	left:8.7em;
	}
#menudiv li:hover ul {
	display:block;
	}

[redux]

seems to work in IE5.5/Win2k for me...

[Keriam]

And it shows up for me in IE6/WinXP Pro

[DeeBs]

I guess I wasn't specific enough. What I meant was that when you hover your mouse over Reviews, a submenu should pop up. That doesn't happen for me, and I've cleared cache, etc to make sure. Even tried on another comp.

~DB

[Keriam]

Leading in with my standard disclaimer, I'm not a CSS expert, but.....

On your page you have this bit of code for you navigation:

<div id="menudiv">
			<ul id="nav">
				<li><a href="#">Reviews</a>
					<ul>
					<li><a href="#">Windows</a></li>
					<li><a href="#">Linux</a></li>
					<li><a href="#">Macintosh</a></li>
					<li><a href="#">Playstation</a></li>
					<li><a href="#">XBox</a></li>
					<li><a href="#">GameCube</a></li>
					</ul>
				</li>
				<li><a href="#">News</a></li>
				<li><a href="#">Forum</a></li>
			</ul>
		</div>

I think the trouble may be because I do not see any definition for id="nav" in your stylesheet (which I chased down through the link at the bottom of your page). Just a novices guess.

Edit: The submenu does not show in Opera7.11 either.

[Zoef]

IE only does the :hover thingy on 'a' tags, you have it set on a 'li'.

Rik

[Neophyte]

After fiddling around for a little bit, and using both Opera and IE6 (i would use mozilla & netscape as well, but I'm at college at the moment) I sorta came up with a solution for you.
Instead of having it 'all' CSS, I have incorporated some JavaScript as well, don't be scared the only thing I went with were onMouseOver and onMouseOut's on the links.

Consider the following styles:

.navIn{
  visibility:hidden;
  display:none;
}
.navOut{
  position:absolute;
  left:3.8em;
  top:0px;
  width:80px;
  display:block;
  visibility:visible;
  list-style-type:none;
  background-color:transparent;
  z-index:999;
}

and the following HTML:

    <li><a href="#" onMouseOut="document.all.reviewlist.className='navIn'" 
        onMouseOver="document.all.reviewlist.className='navOut'">Reviews</a>
      <ul id="reviewlist" class="navIn" onMouseOut="this.className='navIn'" 
      onMouseOver="this.className='navOut'">
      <li><a href="#">Windows</a></li>

      etc...

You can see the result here

Like I said, I haven't been able to test this in Mozilla and Netscape (and older versions of IE) yet, so they may or may not give you some hassle.

Hope this helped.

Cheerz,

John

[DeeBs]

IE only does the :hover thingy on 'a' tags, you have it set on a 'li'.

Rik

Ok, found out where I went wrong, but even correcting that doesn't make it work. The site I was using as a guideline gave this JavaScript To force it in IE.

<script type="text/javascript"><!--//--><![CDATA[//><!--
startList = function() {
	if (document.all&&document.getElementById) {
		navRoot = document.getElementById("nav");
		for (i=0; i<navRoot.childNodes.length; i++) {
			node = navRoot.childNodes[i];
			if (node.nodeName=="LI") {
				node.onmouseover=function() {
					this.className+=" over";
				}
				node.onmouseout=function() {
					this.className=this.className.replace(" over", "");
				}
			}
		}
	}
}
window.onload=startList;

//--><!]]></script>

But as soon as I add that little bit in, it totally breaks everything as far as I can tell. The main body div overlaps the header, even though the z-index of the header is set to 300-something.

~DB

[DeeBs]

After fiddling around for a little bit, and using both Opera and IE6 (i would use mozilla & netscape as well, but I'm at college at the moment) I sorta came up with a solution for you.
Instead of having it 'all' CSS, I have incorporated some JavaScript as well, don't be scared the only thing I went with were onMouseOver and onMouseOut's on the links.

Hmm, tried your Javascript instead of the one I found, and neither work. I'm totally at a loss at this point, I've been working on it for the better part of a week, and I simply cannot get the damn thing to display.

~DB

[DeeBs]

bumpity.

anyone?

[karinne]

Haven't tried it but alistapart.com has a article on that sort of things... http://www.alistapart.com/articles/dropdowns/ maybe it would help.