Please Help - CSS Menu & IE

[janesta]

Hi Folks,

I am really stuck and need some help. I am just a beginner at writing / reading code (the design part is where I feel most comfortable), and I am adding a CSS drop down menu to my site. I used a generator to get the basic code and have went through it changing the colours and stuff but although it seems to be working fine in Safari, Chrome, Firefox..... as usual its broken in IE.

I am used to this and can usually fix the problem by messing about / trial and error, but I can't seem to get this to work. The menu bar is not showing all the headings, some are the wrong colour when you hover and it is spreading onto two lines. Really pulling my hair out!

I don't know how good this code is, but I am not able to sit down and write it from scratch yet. Could someone be kind enough to glance their expert eye over it and see if they can spot what the problem(s) are please. I would be very grateful.

CSS

#pcm{display:none;}
ul.pureCssMenu ul{display:none}
ul.pureCssMenu li:hover>ul{display:block}
ul.pureCssMenu ul{position:absolute;left:-1px;top:98%;}
ul.pureCssMenu ul ul{position:absolute;left:98%;top:-2px;}
ul.pureCssMenu,ul.pureCssMenu ul {
	margin:0px;
	list-style:none;
	padding:0px 3px 3px 0px;
	background-color:#e5b703;
	background-repeat:repeat;

}
ul.pureCssMenu table {border-collapse:collapse}ul.pureCssMenu {
	display:block;
	height: 25px;
	zoom:1;
	z-index: 1000;
	left: 275;
	top: 230;
}
* HTML ul.pureCssMenu 
ul.pureCssMenu ul{
	width:248px;
}
ul.pureCssMenu li{
	display:block;
	margin:3px 7px 0px 7px;
	font-size:0px;
}
ul.pureCssMenu a:active, ul.pureCssMenu a:focus {
outline-style:none;
}
ul.pureCssMenu a, ul.pureCssMenu li.dis a:hover, ul.pureCssMenu li.sep a:hover {
	display:block;
	height: 15px;
	vertical-align:middle;
	background-color:#e5b703;
	border-width:1px;
	border-color:#e5b703;
	border-style:solid;
	text-align:left;
	text-decoration:none;
	padding:4px;
	_padding-left:0;
	font:normal 11px Verdana;
	color: #000000;
	text-decoration:none;
	cursor:pointer;
}
ul.pureCssMenu span{
	overflow:hidden;
}
ul.pureCssMenu li {
	float:left;
}
ul.pureCssMenu ul li {
	float:none;
}
ul.pureCssMenu ul a {
	text-align:left;
	white-space:nowrap;
}
ul.pureCssMenu li.sep{
	text-align:left;
	padding:0px;
	line-height:0;
	height:100%;
}
ul.pureCssMenu li.sep span{
	float:none;	padding-right:0;
	width:3;
	height:100%;
	display:inline-block;
	background-color:#CECECE;	background-image:none;}
ul.pureCssMenu ul li.sep span{
	width:100%;
	height:3;
}
ul.pureCssMenu li:hover{
	position:relative;
}
ul.pureCssMenu li:hover>a{
	background-color:#000000;
	border-color:#000000;
	border-style:solid;
	font:normal 11px Verdana;
	color: #FFFFFF;
	text-decoration:none;
}
ul.pureCssMenu li a:hover{
	position:relative;
	background-color:#000000;
	border-color:#000000;
	border-style:solid;
	font:normal 11px Verdana;
	color: #FFFFFF;
	text-decoration:none;
}
ul.pureCssMenu li.dis a {
	color: #AAAAAA !important;
}
ul.pureCssMenu img {border: none;float:left;_float:none;margin-right:4px;width:24px;height:24px;
}
ul.pureCssMenu ul img {width:16px;height:16px;
}
ul.pureCssMenu img.over{display:none}
ul.pureCssMenu li.dis a:hover img.over{display:none !important}
ul.pureCssMenu li.dis a:hover img.def {display:inline !important}
ul.pureCssMenu li:hover > a img.def  {display:none}
ul.pureCssMenu li:hover > a img.over {display:inline}
ul.pureCssMenu a:hover img.over,ul.pureCssMenu a:hover ul img.def,ul.pureCssMenu a:hover a:hover img.over{display:inline}
ul.pureCssMenu a:hover img.def,ul.pureCssMenu a:hover ul img.over,ul.pureCssMenu a:hover a:hover img.def{display:none}
ul.pureCssMenu a:hover ul{display:block}
ul.pureCssMenu span{
	display:block;
	background-image:url(./images/arrow_sub5.gif);
	background-position:right center;
	background-repeat: no-repeat;
   padding-right:14px;}
ul.pureCssMenu ul span,ul.pureCssMenu a:hover table span{background-image:url(./images/arrow_sub2.gif)}
ul.pureCssMenu ul li:hover > a span{	background-image:url(./images/arrow_sub5.gif);}
ul.pureCssMenu table a:hover span{background-image:url(./images/arrow_sub5.gif)}
</style>


HTML

<ul class="pureCssMenu pureCssMenum">
	<li class="pureCssMenui"><a class="pureCssMenui" href="index.html" target="_self">Home</a></li>
	<li class="pureCssMenui"><a class="pureCssMenui" <span>Installations</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul class="pureCssMenum">
		<li class="pureCssMenui"><a class="pureCssMenui" href="heating.html" target="_self">Heating</a></li>
		<li class="pureCssMenui"><a class="pureCssMenui" href="plumbing.html" target="_self">Plumbing</a></li>
		<li class="pureCssMenui"><a class="pureCssMenui" href="joinery.html" target="_self">Joinery</a></li>
		<li class="pureCssMenui"><a class="pureCssMenui" href="medical.html" target="_self">Medical</a></li>
	</ul>
	<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
	<li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Service Cover</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul class="pureCssMenum">
		<li class="pureCssMenui"><a class="pureCssMenui" href="maintenance.html" target="_self">Maintenance</a></li>
		<li class="pureCssMenui"><a class="pureCssMenui" href="breakdown.html" target="_self">24HR Breakdown Cover</a></li>
	</ul>
	<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
	<li class="pureCssMenui"><a class="pureCssMenui" href="technology.html" target="_self">Technology</a></li>
	<li class="pureCssMenui"><a class="pureCssMenui" href="gallery.html" target="_selfk">Gallery</a></li>
	<li class="pureCssMenui"><a class="pureCssMenui" href="offers.html" target="_self">Special Offers</a></li>
	<li class="pureCssMenui"><a class="pureCssMenui" href="about.html" target="_self">About Us</a></li>
	<li class="pureCssMenui"><a class="pureCssMenui" href="contact.html" target="_self">Contact Us</a></li>
</ul>
</div>

 

[CaldwellYSR]

Ahhh soo long can't read that much code. Wrap your code in the formatting tags for us please. Click 'go advanced' then click the angle brackets you see in the toolbar (angle brackets look like this: <> ) and then paste your code in there.

 

[janesta]

Sorry Matthew - didn't know about that. Hope thats better.

Oh by the way, its also showing the menu as a vertical stack instead of horizontally.