Dropdown Menu Problem in IE

**Moshambi** · 11-29-2008, 04:25 PM

Ok so I have a perfectly fine drop down menu working in Firefox and I need to get it to work in IE. I really have no idea why it's doing what it does.

Here's my .htm file:

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">

<head>
	<meta http-equiv='Content-Type' content='text/html;charset=utf-8' />

	<title>eCap - Home</title>
	
	<link rel="stylesheet" type="text/css" href="main.css" />
	<link rel="stylesheet" type="text/css" href="ie_menu.css" />
	
	<script type="text/javascript" src="menu.js"></script>
	
</head>

<body>
<!-- BEGIN MAIN -->
<div id="main">
	<!-- BEGIN BANNER -->
	<div id="banner">
		<img src="images/banner.jpg" alt="eCap Banner" title="eCap Banner" />
	</div>
	<!-- END BANNER -->
	<!-- BEGIN NAVIGATION -->
	<div id="nav">
	<!-- FIRST ROW -->
	<ul>
		<li><span><a href="#"> Home </a></span></li>
		
		<li onmouseover="javascript: showSub('sub1');" onmouseout="javascript: hideSub('sub1');"><span><a href="#"> Application Certification Processing </a></span>
			<ul id="sub1" style="display: none; position: relative; top: -4px; left: -6px; padding: 0px; margin: 0px;" onmouseover="javascript: showSub('sub1');" onmouseout="javascript: hideSub('sub1');" >
				<li><a href="#"> Maintain Case/Applicants </a></li>
				<li><a href="maintainprogramcertification.htm"> Maintain Program Certification </a></li>
				<li><a href="#"> Maintain Household Members </a></li>
				<li><a href="#"> List/Approve Case/ Applicants (supervisor) </a></li>

			</ul>
		</li>
		
		<li onmouseover="javascript: showSub('sub2');" onmouseout="javascript: hideSub('sub2');"><span><a href="#"> Payment Processing </a></span>
			<ul id="sub2" style="display: none; position: relative; top: -4px; left: -6px; padding: 5px; margin: 0px;" onmouseover="javascript: showSub('sub2');" onmouseout="javascript: hideSub('sub2');" >
				<li><a href="#"> Process Electric Bill </a></li>
				<li><a href="#"> Process Gas Bill </a></li>
				<li><a href="#"> List/Approve Bills </a></li>
			</ul>
		</li>
		
		<li onmouseover="javascript: showSub('sub3');" onmouseout="javascript: hideSub('sub3');"><span><a href="#"> Operations </a></span>
			<ul id="sub3" style="display: none; position: relative; top: -4px; left: -6px; padding: 5px; margin: 0px;" onmouseover="javascript: showSub('sub3');" onmouseout="javascript: hideSub('sub3');" >
				<li><a href="#"> Expire Bill </a></li>
				<li><a href="#"> Expire Case </a></li>
				<li><a href="#"> Export to Vitelco </a></li>
				<li><a href="#"> Export to Great Plains for Electricity Check </a></li>
				<li><a href="#"> Export to Great Plains for Electricity Vendor </a></li>
				<li><a href="#"> Export to Great Plains for Gas Check </a></li>
				<li><a href="#"> Export to Great Plains for Gas Vendors </a></li>
			</ul>
		</li>
	</ul>
	<!-- END FIRST ROW, BEGIN SECOND ROW -->
		<div id="nav2">
			<ul>
				<li onmouseover="javascript: showSub('sub4');" onmouseout="javascript: hideSub('sub4');"><span><a href="#"> Learning </a></span>
					<ul id="sub4" style="display: none; position: relative; top: -4px; left: -6px; padding: 5px; margin: 0px;" onmouseover="javascript: showSub('sub4');" onmouseout="javascript: hideSub('sub4');" >
						<li><a href="#"> Program Manual </a></li>
						<li><a href="#"> FAQs </a></li>
						<li><a href="#"> Website Links </a></li>
						<li><a href="#"> Employee Training </a></li>
						<li><a href="#"> Schedules </a></li>

					</ul>
				</li>
				
				<li onmouseover="javascript: showSub('sub5');" onmouseout="javascript: hideSub('sub5');"><span><a href="#"> Administration </a></span>
					<ul id="sub5" style="display: none; position: relative; top: -4px; left: -6px; padding: 5px; margin: 0px;" onmouseover="javascript: showSub('sub5');" onmouseout="javascript: hideSub('sub5');" >
						<li><a href="#"> Manage Users </a></li>
						<li><a href="#"> Manage Vendors </a></li>
						<li><a href="#"> Manage Eligibility Tables </a></li>
						<li><a href="#"> Manage Lookup Lists </a></li>
					</ul>
				</li>
				
				<li><span><a href="#"> Logout </a></span></li>
			</ul>
		</div> 
		<!-- END SECOND ROW -->
	</div> 
	<!-- END NAVIGATION -->
	
	<!-- BEGIN CONTENT -->
	<div id="content">
	<p>
		<span class="bold">You are logged in as:</span> NELSON, JACK <br />
		<span class="bold">Full Name:</span> Jack Nelson <br />
		<span class="bold">Location:</span> St. Croix <br />
		<span class="bold">User Role:</span> Administrator <br />
	</p>
	</div>
	<!-- END CONTENT -->
	
</div>
<!-- END MAIN -->
</body>
</html>

Here is the .css file:

Code:

#nav ul
{
	list-style-type: none;
	text-align: center;
}

#nav ul li
{
	display: block;
	width: 175px;
	height: 40px;
	border: 1px solid black;
	float: left;
}

#nav span
{
	display: block;
	width: 175px;
	height: 40px;
}

#nav a
{
	display: block;
	width: 175px;
	height: 40px;
	background-color: skyblue;
	text-decoration: none;
	color: white;
	font-weight: bold;
}

#sub1 a, #sub2 a, #sub3 a, #sub4 a, #sub5 a
{
	display: block;
	width: 175px;
	height: 40px;
	background-color: darkblue;
	text-decoration: none;
	color: white;
	font-weight: bold;
}

#nav a:hover
{
	color: black;
}

#sub1 a:hover, #sub2 a:hover, #sub3 a:hover, #sub4 a:hover, #sub5 a:hover
{
	color: yellow;
}

#nav
{
	position: relative;
	left: 0px;
	top: 0px;
	/*z-index: 50;*/
	margin: 0px;
	padding: 0px;
}

#nav2
{
	margin-left: 100px;
	z-index: 0;
}

And finally the JavaScript code:

Code:

function showSub(elem)
{
	var x = document.getElementById(elem);
	
	x.style.display = "block";
}

function hideSub(elem)
{
	var x = document.getElementById(elem);
	
	x.style.display = "none";
	
}

I know it mught be a lot to look through but any help would be GREATLY APPRECIATED!!

Thanks in advance!

**BLiZZaRD** · 11-29-2008, 06:57 PM

I really have no idea why it's doing what it does.

So what is it "doing"?

**Moshambi** · 11-29-2008, 08:27 PM

lol oops sorry I guess I forgot to say that.

It's got a top and bottom to it so it looks like this:

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

The top line being a row of links for the menu and same with the second.
Now when when I hover over the link on the top row it makes a huge space
the size of the actual dropdown list. It's like the z-index isn't working or something. Or it's kinda like the difference between display and visibility, it actually pushes all the items on the bottom row to the right or pushes them down the page the length of the newly visible element. I guess that would be the best way to explain it? If it doesn't make sense let me know and I'll take a
screenshot of it.

Thread: Dropdown Menu Problem in IE

Thread Tools

Search Thread

Dropdown Menu Problem in IE

Bookmarks

Bookmarks

Posting Permissions