I'd like some assistance to make the CSS below friendly to IE6. The menu displays correctly in IE8 and Firefox, but simply displays a large blue band across the top of the page. I'd appreciate either additions to the stylesheet or links that'll help me write my own hacks to make it work. Thanks for any help. By the way, I'm trying to make my menu look like this one: HERE

.menustyl
{
    position:relative;
    z-index: 300;
}
.menustyl ul.AspNet-Menu /* Tier 1 */
{
    float: left;
    color:White;
}
.menustyl ul.AspNet-Menu li
{
    border-left: solid 1px #4682B3;
    border-right: solid 1px #4682B3;
    color:White;
}
.menustyl ul.AspNet-Menu ul  /* Tier 2 */
{
    width: 14.9em;
    left: 0%;
    background: #4682B3;
    z-index: 400;
}
.menustyl ul.AspNet-Menu ul li  /* Tier 2 list items */
{
    width: 14.9em;
    border:1px solid #cccccc;
    float: left;
    clear: left;
    height: 100%;
    color:White;
}
.menustyl ul.AspNet-Menu ul ul  /* Tier 3+ */
{
    top:-0.4em;
    left: 15em;
}
.menustyl li /* all list items */
{
    font-size: x-small;
}
.menustyl li:hover, /* list items being hovered over */
.menustyl li.AspNet-Menu-Hover
{
    background: #4682B3;
}
.menustyl a, /* all anchors and spans (nodes with no link) */
.menustyl span
{
    color: White;
    padding: 4px 12px 4px 8px;
    background: transparent url(arrowRight.gif) right center no-repeat;
}
.menustyl li.AspNet-Menu-Leaf a, /* leaves */
.menustyl li.AspNet-Menu-Leaf span
{
    background-image: none !important;
}
.menustyl li:hover a,
.menustyl li:hover span,
.menustyl li.AspNet-Menu-Hover a,
.menustyl li.AspNet-Menu-Hover span,
.menustyl li:hover li:hover a,
.menustyl li:hover li:hover span,
.menustyl li.AspNet-Menu-Hover li.AspNet-Menu-Hover a,
.menustyl li.AspNet-Menu-Hover li.AspNet-Menu-Hover span,
.menustyl li:hover li:hover li:hover a,
.menustyl li:hover li:hover li:hover span,
.menustyl li.AspNet-Menu-Hover li.AspNet-Menu-Hover li.AspNet-Menu-Hover a,
.menustyl li.AspNet-Menu-Hover li.AspNet-Menu-Hover li.AspNet-Menu-Hover span
{
    color: White;
    background: url(activeArrowRight.gif) #000099 no-repeat right center;
}
.menustyl li:hover li a, /* the tier above this one is hovered */
.menustyl li:hover li span,
.menustyl li.AspNet-Menu-Hover li a,
.menustyl li.AspNet-Menu-Hover li span,
.menustyl li:hover li:hover li a,
.menustyl li:hover li:hover li span,
.menustyl li.AspNet-Menu-Hover li.AspNet-Menu-Hover li a,
.menustyl li.AspNet-Menu-Hover li.AspNet-Menu-Hover li span
{
    color: White;
    background: transparent url(arrowRight.gif) right center no-repeat;
}

You are going to have to define completely different CSS rules for IE 6, it is not CSS compliant and therefore any CSS rules you define for it most likely wont work well unless you have rules for IE 6 and rules for {IE 8, FF, Chrome ...}

Smashing magazing wrote a good article on the IE differences this week, http://www.smashingmagazine.com/2009/10/14/css-differences-in-internet-explorer-6-7-and-8/

The solution in my case was to simply add a width to the ul.Asp-Net and ul.Asp-Net li elements (as has been discussed here: http://forums.asp.net/p/1162358/1924729.aspx#1924729) and remove the 'position' attribute. Now looks better in IE6 then in IE8 and Firefox.