First issue:
Add this code to your home page in the section AFTER your style sheet calls, preferably right above the closing tag:

<!--[if lte IE 9]>
   <style> #nav li { margin-right: 0px; } </style>
<![endif]-->

Second issue:
implement http://css3pie.com/ it should take care of the gradient bleeding bug...alternatively, you could simply add a wildcard and set border-radius to none in the conditional style, you will have to live with the square look for IE, but IE is becoming less popular by the day...it is merely a matter of how much those rounded corners really mean to you...the fix above would now turn into this:

<!--[if lte IE 9]>
   <style> 
      #nav li { margin-right: 0px; }
      * { 
        border-radius: 0px; 
        -moz-border-radius: 0px;
        -webkit-border-radius: 0px;
      }
   </style>
<![endif]-->

Hi kgscott284

it means quite a bit as the drop down menu looks bit rubbish when I hover the main items and the menu drops down, hover over childrens toys for example in IE9 and its got square edges but rounded corners, that make sense

I think that is what it is doing for the main menu items as well as when I hover baby toys, I can see a rounded corner but the edges are square

It should in fact fix those issues as well

Hi kgscott284

Below is the css3 styles in my stylesheet.css that the css3 drop down menu is using

#nav {
	margin: 0;
	padding: 7px 6px 0;
	line-height: 100%;
	-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
	-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
	background: #8b8b8b; /* for non-css3 browsers */
	background-color: #18D418;
	border: solid 1px #6d6d6d;
	behavior: url(PIE.htc);
}
#nav li {
	margin: 0 4px;
	margin-left: 25px;
	padding: 0 0 8px;
	float: left;
	position: relative;
	list-style: none;
	behavior: url(PIE.htc);
}
/* main level link */
#nav a {
	border-radius: 2em;
	-moz-border-radius: 2em;
	font-weight: bold;
	color: #000000;
	text-decoration: none;
	display: block;
	padding:  8px 20px;
	margin: 0;
	text-shadow: 0 0px 0px rgba(0, 0, 0, .3);
	background-color: #F6A828;
	behavior: url(PIE.htc);
}
/* main level link hover */
#nav .current a, #nav li:hover > a {
	background: #d1d1d1; /* for non-css3 browsers */
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ebebeb', endColorstr='#a1a1a1'); /* for IE */
	background: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#a1a1a1)); /* for webkit browsers */
	background: -moz-linear-gradient(top,  #ebebeb,  #a1a1a1); /* for firefox 3.6+ */
	color: #FFFFFF;
	border-top: solid 1px #f8f8f8;
	-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
	-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
	box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
	text-shadow: 0 0px 0 rgba(255, 255, 255, .8);
	behavior: url(PIE.htc);
}
/* sub levels link hover */
#nav ul li:hover a, #nav li:hover li a {
	background: none;
	border: none;
	color: #666;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	behavior: url(PIE.htc);
}
#nav ul a:hover {
	background: #0399d4 !important; /* for non-css3 browsers */
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#04acec', endColorstr='#0186ba'); /* for IE */
	background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba)) !important; /* for webkit browsers */
	background: -moz-linear-gradient(top,  #04acec,  #0186ba) !important; /* for firefox 3.6+ */

	color: #fff !important;
	text-shadow: 0 1px 1px rgba(0, 0, 0, .1);
	behavior: url(PIE.htc);
}
/* level 2 list */
#nav ul {
	border-radius: 2em;
	-moz-border-radius: 2em;
	background: #ddd; /* for non-css3 browsers */
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#cfcfcf'); /* for IE */
	background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#cfcfcf)); /* for webkit browsers */
	background: -moz-linear-gradient(top,  #fff,  #cfcfcf); /* for firefox 3.6+ */

	display: none;
	margin: 0;
	padding: 0;
	width: 185px;
	position: absolute;
	top: 35px;
	left: 0;
	border: solid 1px #b4b4b4;
	-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
	-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
	z-index: 1000;
	behavior: url(PIE.htc);
}
/* dropdown */
#nav li:hover > ul {
	display: block;
}
#nav ul li {
	float: none;
	margin: 0;
	padding: 0;
	behavior: url(PIE.htc);
}
#nav ul a {
	font-weight: normal;
	text-shadow: 0 1px 1px rgba(255, 255, 255, .9);
	behavior: url(PIE.htc);
}
/* level 3+ list */
#nav ul ul {
	left: 181px;
	top: -3px;
}
/* rounded corners for first and last child */
#nav ul li:first-child > a {
	-webkit-border-top-left-radius: 9px;
	-moz-border-radius-topleft: 9px;
	-webkit-border-top-right-radius: 9px;
	-moz-border-radius-topright: 9px;
	position: relative;
}
#nav ul li:last-child > a {
	-webkit-border-bottom-left-radius: 9px;
	-moz-border-radius-bottomleft: 9px;
	-webkit-border-bottom-right-radius: 9px;
	-moz-border-radius-bottomright: 9px;
}
/* clearfix */
#nav:after {
	content: ".";
	display: block;
	clear: both;
	visibility: visible;
	line-height: 0;
	height: 0;
}
#nav {
	display: inline-block;
	behavior: url(PIE.htc);

}
html[xmlns] #nav {
	display: block;
	behavior: url(PIE.htc);
}
* html #nav {
	height: 1%;
	behavior: url(PIE.htc);
}

In your .htaccess file add this line:


AddType text/x-component .htc


If that doesn't work than you will probably have to deal with square edges unless someone else can bring something else out to the table...sorry man I tried my best there!

I would just append it to the bottom of the file...

I am not sure about the menu issue i am actually about to go to sleep it is 3:45am over here on the west coast of the USA, if no one else responds, make a new topic specifically about the menu cut-off issue...and if you don't find any help, i will gladly help again. Have a good day.

I added it to the bottom of the .htaccess file and didnt work still so will live with it for now

Just worried about the menu being cut off now, I will post a new topic about that now