No replies
AddSomeMusic
Offline
newbie
UK
Last seen: 13 years 32 weeks ago
UK
Joined: 2009-02-16
Posts: 1
Points: 0

Hi Guys!

I'm new to CSS and hover menus..

In fact i've found this code, modified the images and widths, and all good....in Firefox...

However thought i'd have a check in IE and... It doesn't work!!

Sure you've come across this before, and was wondering if anyone could tell me where i've gone wrong

Thanks in advance!

CSS:

<style type="text/css" media="screen">
 
#outside{
	/* border:1px solid #000099; */
	/* background:#000099; */
	}
#navigation-1 {
	padding:1px 0;
	margin:0px;
	list-style:none;
	width:100%;
	height:21px;
	border-top:1px solid #FFFFFF;
	border-bottom:1px solid #FFFFFF;
	font:normal 8pt verdana, arial, helvetica;
}
#navigation-1 li {
	margin:0;
	padding:0;
	display:block;
	float:left;
	position:relative;
	width:100px;
}
#navigation-1 li a:link, #navigation-1 li a:visited {
	padding:4px 0;
	display:block;
	text-align:center;
	text-decoration:none;
	/* background:#000099; */
	background-image:url(images/nav_button.jpg);
	color:#ffffff;
	width:100px;
	height:13px;
}
#navigation-1 li:hover a, #navigation-1 li a:hover, #navigation-1 li a:active {
	padding:4px 0;
	display:block;
	text-align:center;
	text-decoration:none;
	/* background:#0066FF; */
	background-image:url(images/nav_button_over.jpg);
	color:#ffffff;
	width:100px;
	height:13px;
	/* border-left:1px solid #ffffff;
	border-right:1px solid #ffffff; */
}
#navigation-1 li ul.navigation-2 {
	margin:0;
	padding:1px 1px 0;
	list-style:none;
	display:none;
	background:#ffffff;
	width:98px;
	position:absolute;
	top:22px;
	left:-1px;
	border:1px solid #999999;
	border-top:none;
}
#navigation-1 li:hover ul.navigation-2 {
	display:block;
}
#navigation-1 li ul.navigation-2 li {
	width:98px;
	clear:left;
	width:98px;
}
#navigation-1 li ul.navigation-2 li a:link, #navigation-1 li ul.navigation-2 li a:visited {
	clear:left;
	background:#FF3300;
	padding:4px 0;
	width:98px;
	border:none;
	border-bottom:1px solid #ffffff;
	position:relative;
	z-index:80;
}
#navigation-1 li ul.navigation-2 li:hover a, #navigation-1 li ul.navigation-2 li a:active, #navigation-1 li ul.navigation-2 li a:hover {
	clear:left;
	background:#00FF00;
	padding:4px 0;
	width:98px;
	border:none;
	border-bottom:1px solid #ffffff;
	position:relative;
	z-index:80;
}
#navigation-1 li ul.navigation-2 li ul.navigation-3 {
	display:none;
	margin:0;
	padding:0;
	list-style:none;
	position:absolute;
	left:145px;
	top:-2px;
	padding:1px 1px 0 1px;
	border:1px solid #000099;
	border-left:1px solid #000099;
	background:#ffffff;
	z-index:90;
}
#navigation-1 li ul.navigation-2 li:hover ul.navigation-3 {
	display:block;
}
#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:link, #navigation-1 li ul.navigation-2 li ul.navigation-3 li a:visited {
	background:#000099;
}
#navigation-1 li ul.navigation-2 li ul.navigation-3 li:hover a, #navigation-1 li ul.navigation-2 li ul.navigation-3 li a:hover, #navigation-1 li ul.navigation-2 li ul.navigation-3 li a:active {
	background:#0066FF;
}
#navigation-1 li ul.navigation-2 li a span {
	position:absolute;
	top:0;
	left:132px;
	font-size:12pt;
	color:#fe676f;
}
#navigation-1 li ul.navigation-2 li:hover a span, #navigation-1 li ul.navigation-2 li a:hover span {
	position:absolute;
	top:0;
	left:132px;
	font-size:12pt;
	color:#ffffff;
}
 
 
 
</style>

HTML:

	/* background:#000099; */
	}
#navigation-1 {
	padding:1px 0;
	margin:0px;
	list-style:none;
	width:100%;
	height:21px;
	border-top:1px solid #FFFFFF;
	border-bottom:1px solid #FFFFFF;
	font:normal 8pt verdana, arial, helvetica;
}
#navigation-1 li {
	margin:0;
	padding:0;
	display:block;
	float:left;
	position:relative;
	width:100px;
}
#navigation-1 li a:link, #navigation-1 li a:visited {
	padding:4px 0;
	display:block;
	text-align:center;
	text-decoration:none;
	/* background:#000099; */
	background-image:url(images/nav_button.jpg);
	color:#ffffff;
	width:100px;
	height:13px;
}
#navigation-1 li:hover a, #navigation-1 li a:hover, #navigation-1 li a:active {
	padding:4px 0;
	display:block;
	text-align:center;
	text-decoration:none;
	/* background:#0066FF; */
	background-image:url(images/nav_button_over.jpg);
	color:#ffffff;
	width:100px;
	height:13px;
	/* border-left:1px solid #ffffff;
	border-right:1px solid #ffffff; */
}
#navigation-1 li ul.navigation-2 {
	margin:0;
	padding:1px 1px 0;
	list-style:none;
	display:none;
	background:#ffffff;
	width:98px;
	position:absolute;
	top:22px;
	left:-1px;
	border:1px solid #999999;
	border-top:none;
}
#navigation-1 li:hover ul.navigation-2 {
	display:block;
}
#navigation-1 li ul.navigation-2 li {
	width:98px;
	clear:left;
	width:98px;
}
#navigation-1 li ul.navigation-2 li a:link, #navigation-1 li ul.navigation-2 li a:visited {
	clear:left;
	background:#FF3300;
	padding:4px 0;
	width:98px;
	border:none;
	border-bottom:1px solid #ffffff;
	position:relative;
	z-index:80;
}
#navigation-1 li ul.navigation-2 li:hover a, #navigation-1 li ul.navigation-2 li a:active, #navigation-1 li ul.navigation-2 li a:hover {
	clear:left;
	background:#00FF00;
	padding:4px 0;
	width:98px;
	border:none;
	border-bottom:1px solid #ffffff;
	position:relative;
	z-index:80;
}
#navigation-1 li ul.navigation-2 li ul.navigation-3 {
	display:none;
	margin:0;
	padding:0;
	list-style:none;
	position:absolute;
	left:145px;
	top:-2px;
	padding:1px 1px 0 1px;
	border:1px solid #000099;
	border-left:1px solid #000099;
	background:#ffffff;
	z-index:90;
}
#navigation-1 li ul.navigation-2 li:hover ul.navigation-3 {
	display:block;
}
#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:link, #navigation-1 li ul.navigation-2 li ul.navigation-3 li a:visited {
	background:#000099;
}
#navigation-1 li ul.navigation-2 li ul.navigation-3 li:hover a, #navigation-1 li ul.navigation-2 li ul.navigation-3 li a:hover, #navigation-1 li ul.navigation-2 li ul.navigation-3 li a:active {
	background:#0066FF;
}
#navigation-1 li ul.navigation-2 li a span {
	position:absolute;
	top:0;
	left:132px;
	font-size:12pt;
	color:#fe676f;
}
#navigation-1 li ul.navigation-2 li:hover a span, #navigation-1 li ul.navigation-2 li a:hover span {
	position:absolute;
	top:0;
	left:132px;
	font-size:12pt;
	color:#ffffff;
}
 
 
 
</style>
 
 
 
</head>
 
<body>
 
<div id="outside">
<ul id="navigation-1">
   <li><a href="#" title="sample" target="_self" >Home</a>
      <ul class="navigation-2">
         <li><a href="#" title="sample" target="_self" >About</a></li>
         <li><a href="#" title="sample" target="_self" >Contact</a></li>
         <li><a href="#" title="sample" target="_self" >Help</a></li>
      </ul>
   </li>
   <li><a href="#" title="sample" target="_self" >Badminton</a>
      <ul class="navigation-2">
         <li><a href="#" title="sample" target="_self" >Rackets</a></li>
         <li><a href="#" title="sample" target="_self" >Shuttles</a></li>
         <li><a href="#" title="sample" target="_self" >Clothing</a></li>
		 <li><a href="#" title="sample" target="_self" >Footwear</a></li>
         <li><a href="#" title="sample" target="_self" >Luggage</a></li>
      </ul>
   </li>
   <li><a href="#" title="sample" target="_self" >Squash</a>
      <ul class="navigation-2">
         <li><a href="#" title="sample" target="_self" >Rackets</a></li>
         <li><a href="#" title="sample" target="_self" >Balls</a></li>
         <li><a href="#" title="sample" target="_self" >Clothing</a></li>
		 <li><a href="#" title="sample" target="_self" >Footwear</a></li>
         <li><a href="#" title="sample" target="_self" >Luggage</a></li>
      </ul>
   </li>
   <li><a href="#" title="sample" target="_self" >Tennis</a>
      <ul class="navigation-2">
         <li><a href="#" title="sample" target="_self" >Rackets</a></li>
         <li><a href="#" title="sample" target="_self" >Balls</a></li>
         <li><a href="#" title="sample" target="_self" >Clothing</a></li>
		 <li><a href="#" title="sample" target="_self" >Footwear</a></li>
         <li><a href="#" title="sample" target="_self" >Luggage</a></li>
      </ul>
   </li>
   <li><a href="#" title="sample" target="_self" >Services</a>
      <ul class="navigation-2">
         <li><a href="#" title="sample" target="_self" >Coaching</a></li>
         <li><a href="#" title="sample" target="_self" >Stringing</a></li>
      </ul>
   </li>
</ul>
</div>