Ul Li base dropdown menu is abnormally behave in IE

[neovantage]

Hey all,
I have integrated UL, Li base dropdown menu but it is bevaing abnormal in IE. Can somebody have a look on my code and help me out to fix the problem. Here is the Link of my website.

*Note: It is working fine in Safari and Firefox Mozilla but creating problem in IE

And here is the HTML code.

<span class="preload1"></span>
        <span class="preload2"></span>
        <ul id="nav">
            <li class="top"><a href="#nogo1" class="top_link"><span>Home</span></a></li>
            <li class="top"><a href="#nogo2" id="products" class="top_link"><span class="down">jQuery</span></a>
                <ul class="sub">
                    <li><a href="#nogo3" class="fly">Time | Date | Color picker</a></li>
                    <li><a href="#nogo7" class="fly">Accordions | Menu | Form</a></li>
                    <li><a href="#nogo19">Flash Guns</a></li>
                    <li><a href="#nogo20">Tripods</a></li>
                </ul>
            </li>
            <li class="top"><a href="#nogo22" id="services" class="top_link"><span class="down">MooTools</span></a>
                <ul class="sub">
                    <li><a href="#nogo3" class="fly">Time | Date | Color picker</a></li>
                    <li><a href="#nogo7" class="fly">Accordions | Menu | Form</a></li>
                    <li><a href="#nogo19">Flash Guns</a></li>
                    <li><a href="#nogo20">Tripods</a></li>
                </ul>
            </li>
            <li class="top"><a href="#nogo53" id="shop" class="top_link"><span class="down">Others</span></a>
                <ul class="sub">
                    <li><a href="#nogo3" class="fly">Time | Date | Color picker</a></li>
                    <li class="mid"><a href="#nogo7" class="fly">Accordions | Menu | Form</a></li>
                    <li><a href="#nogo19">Flash Guns</a></li>
                    <li><a href="#nogo20">Tripods</a></li>
                </ul>
            </li>
        </ul>
 

and here is CSS Code

.preload1 {background: url(../images/img-04.png);}
.preload2 {background: url(../images/img-04.png);}
#nav {padding:0; margin:0; list-style:none; height:53px; background:url(../images/img-03.png) repeat-x; position:relative; z-index:500; font-family:arial; }
#nav li.top {display:block; float:left; height:53px;}
#nav li a.top_link {display:block; height:50px; line-height:48px; color:#00FFF6; text-decoration:none; font-size:12px; font-weight:normal; padding:0px; cursor:pointer;}
#nav li a.top_link span {float:left; display:block; padding:0 24px 0 24px; height:50px;}
#nav li a.top_link span.down {float:left; display:block; padding:0 24px 0 24px; height:50px;}
 
#nav li:hover a.top_link { color:#fff; background: url(../images/img-04.png) no-repeat center top;}
#nav li:hover a.top_link span {background:url(../images/img-04.png) no-repeat center top;}
#nav li:hover a.top_link span.down {background:url(../images/img-04.png) no-repeat center top;}
 
/* Default list styling */
 
#nav li:hover {position:relative; z-index:200;}
 
#nav li:hover ul.sub
{left:1px; top:51px; background: #030606; padding:0px; border:0px solid #FF0000; white-space:nowrap; width:150px; height:auto; z-index:300;}
#nav li:hover ul.sub li
{display:block; height:30px; position:relative; float:left; width:150px; font-weight:normal;}
#nav li:hover ul.sub li a
{display:block; font-size:12px; height:26px; width:148px; line-height:26px; text-indent:5px; color:#00FFF6; text-decoration:none;border-bottom:1px dashed #026A67;}
#nav li ul.sub li a.fly
{ background:url(../images/arrow.gif) 140px 6px no-repeat;}
#nav li:hover ul.sub li a:hover 
{color:#fff; border-color:#fff;}
#nav li:hover ul.sub li a.fly:hover
{background:url(../images/arrow_over.gif) 140px 6px no-repeat; color:#fff;}
 
 
#nav li:hover li:hover ul,
#nav li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover li:hover ul
{left:153px; top:-4px; background: #030606; padding:3px; border:0px solid #FF0000; white-space:nowrap; width:150px; z-index:400; height:auto;}
 
#nav ul, 
#nav li:hover ul ul,
#nav li:hover li:hover ul ul,
#nav li:hover li:hover li:hover ul ul,
#nav li:hover li:hover li:hover li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}
 
#nav li:hover li:hover a.fly,
#nav li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover li:hover a.fly
{background:#121313 url(arrow_over.gif) 140px 6px no-repeat; color:#fff; border-color:#fff;} 
 
#nav li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li:hover li a.fly
{background:#030606 url(arrow.gif) 140px 6px no-repeat; color:#00FFF6; border-color:#000;}
 

kind regards,
Mohsin Rafique

[drhowarddrfine]

The comments placed in front of the doctype will put IE into quirks mode. Remove the everything before the doctype.

[neovantage]

I have removed the comments before doctype statement but even then it is not working....