CSS Submenu Does not work in IE .. Works in Firefox / Chrome - Web Design & Web Development Forum: HTML, CSS, JavaScript, PHP

real_shock · #1 29 Jul 2009, 06:40 AM

I used this website to generate a CSS Drop down menu:
http://www.cssmenumaker.com

The menu shows in both firefox and IE, but in IE the submenus don't work.

here is the CSS generated by the website:

Code:

.menu{
	border:none;
	border:0px;
	margin:0px;
	padding:0px;
	font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
	font-size:14px;
	font-weight:bold;
	}
.menu ul{
	background:#333333;
	height:35px;
	list-style:none;
	margin:0;
	padding:0;
	}
	.menu li{
		float:left;
		padding:0px;
		}
	.menu li a{
		background:#333333 url("images/seperator.gif") bottom right no-repeat;
		color:#cccccc;
		display:block;
		font-weight:normal;
		line-height:35px;
		margin:0px;
		padding:0px 25px;
		text-align:center;
		text-decoration:none;
		}
		.menu li a:hover, .menu ul li:hover a{
			background: #2580a2 url("images/hover.gif") bottom center no-repeat;
			color:#FFFFFF;
			text-decoration:none;
			}
	.menu li ul{
		background:#333333;
		display:none;
		height:auto;
		padding:0px;
		margin:0px;
		border:0px;
		position:absolute;
		width:225px;
		z-index:200;
		/*top:1em;
		/*left:0;*/
		}
	.menu li:hover ul{
		display:block;
		
		}
	.menu li li {
		background:url('images/sub_sep.gif') bottom left no-repeat;
		display:block;
		float:none;
		margin:0px;
		padding:0px;
		width:225px;
		}
	.menu li:hover li a{
		background:none;
		
		}
	.menu li ul a{
		display:block;
		height:35px;
		font-size:12px;
		font-style:normal;
		margin:0px;
		padding:0px 10px 0px 15px;
		text-align:left;
		}
		.menu li ul a:hover, .menu li ul li:hover a{
			background:#2580a2 url('images/hover_sub.gif') center left no-repeat;
			border:0px;
			color:#ffffff;
			text-decoration:none;
			}
	.menu p{
		clear:left;
		}

and here is how i inserted the code into index.php:

Code:

<html>

<head> 
<link rel="stylesheet" href="css/style.css" type="text/css" />
</head>

<body>
<div id="page" align="center">

<div id="header">
	<div id="logo">
	<a href="#" style="text-decoration:none"><img src="images/logo.png" style="border:none"></a>
	</div>
</div>

<div id="menu">
	<style media="all" type="text/css">@import "/menu/menu/menu_style.css";</style>
	<div class="menu">
	<ul>
	<li><a href="http://localhost" target="_self" >Home</a>
	<ul>
	<li><a href="http://localhost" target="_self">Something 1</a></li>
	<li><a href="http://localhost" target="_self">Something 2</a></li>
	<li><a href="" target="_self"></a></li>
	</ul>
	</li>
	<li><a href="http://localhost" target="_self" >About Us</a>
	<ul>
	<li><a href="http://localhost" target="_self">Something 1 </a></li>
	<li><a href="http://localhost" target="_self">Something 2 </a></li>
	<li><a href="" target="_self"></a></li>
	</ul>
	</li>
	<li><a href="http://localhost" target="_self" >Contact Us</a>
	</li>
	<li><a href="" target="_self" ></a>
	</li>
	</ul>
	</div>
</div>

<div id="content">
</div>

<div id="footer">
</div>

</div>
</body>

</html>

In firefox and when i hover over "Home", a submneu appears and wokrs just fine. In IE when i hoever over "Home", nothing happens; submenu doesn't appear at all.

Can someone point me in the right direction please?

TY

Ventrex · #2 29 Jul 2009, 08:36 AM

I have the also a problem with a menu I've taken from that site just that my menu is a normal horizontal menu and the problem is that in IE 7 and down the menu just appears to go down and diagonal instead of being straight.

Wickham · #3 29 Jul 2009, 09:20 AM

I used your code and only made these edits and it now seems OK in IE7 and Firefox:-

Delete <html> at the top of your html code and add

<!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" xml:lang="en" lang="en">

I didn't see the diagonal sub menu so I think that has been cured too.

You need to add a title in the head section and also a charset, probably like:-

<meta http-equiv="content-type" content="text/html; charset=utf-8"/>

<title>Test</title>

then check with a validator http://validator.w3.org/ for errors.

real_shock · #4 01 Aug 2009, 08:00 PM

That didn't work. The first level of the menu works but the sub menus will not. Here is how my code looks right now. Please let me know if you see any thing wrong :-)

When i take the <head> section off, it would work. That means that the problem is in the CSS above.... Can not pin point it though

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" xml:lang="en" lang="en">
<meta http-equiv="content-type" content="text/html;  charset=utf-8"/>
<title>Home</head>

<body>
<div id="page" align="center">

<div id="header">
	<div id="logo">
	<a href="#" style="text-decoration:none"><img src="images/hospice-logo.png" style="border:none"></a>
	</div>
</div>

<div id="menu">
	<style media="all" type="text/css">@import "/menu/menu/menu_style.css";</style>
	<div class="menu">
	<ul>
	<li><a href="http://localhost" target="_self" >Home</a>
	<ul>
	<li><a href="http://localhost" target="_self">Something 1</a></li>
	<li><a href="http://localhost" target="_self">Something 2</a></li>
	<li><a href="" target="_self"></a></li>
	</ul>
	</li>
	<li><a href="http://localhost" target="_self" >About Us</a>
	<ul>
	<li><a href="http://localhost" target="_self">Something 1 </a></li>
	<li><a href="http://localhost" target="_self">Something 2 </a></li>
	<li><a href="" target="_self"></a></li>
	</ul>
	</li>
	<li><a href="http://localhost" target="_self" >Contact Us</a>
	</li>
	<li><a href="" target="_self" ></a>
	</li>
	</ul>
	</div>
</div>

<div id="content">
</div>

<div id="footer">
</div>

</div>
</body>

</html>

Wickham · #5 02 Aug 2009, 03:29 AM

The sub-level menus worked in IE7 and Firefox when I tested on 29th July here:-

http://www.wickham43.supanet.com/for...eal090729.html

There are some validation errors that you need to sort out http://validator.w3.org/

Here's a validating version:-
http://www.wickham43.supanet.com/for...eal090802.html

You have to use the Transitional doctype when you use target=