0

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:

.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:

<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 happends; submenu doesn't appear at all.

Can someone point me in the right direction please?

3
Contributors
3
Replies
4
Views
8 Years
Discussion Span
Last Post by waelaltaqi
0

0px is not a valid style. Use just 0 for all 0 values. Do not attach a unit of measure. It causes some browsers to throw away the style.

0

Thanks guys.... I ended up using a Java script menu which worked just fine ... Thanks for the posts though :-)

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.