下拉菜单的版本低于IE9

Question

CSS和HTML代码在Internet Explorer9中工作正常。下载在IE9及更高版本中正常工作。但它正在改变其在较低版本的IE中的对齐并且下拉消失。任何人都可以指导我如何制作它在较低版本的IE中工作或者应该在代码中进行更正。

  

我的HTML代码

 <div class="navigation">                
   <ul id="nav" class="drop">
     <li><a href="index.jsp">Home</a></li>
      <li>Upload
         <ul>
         <li><a href="UploadBacklog.jsp">BackLog</a></li>
         <li><a href='MessageUpload.jsp'>Message</a></li>
         <li><a href="upload.jsp">Customer</a></li>
         </ul>
     </li>
     <li>Download Format
        <ul>
           <li><a href="BackLog">BackLog Format</a></li>
           <li><a href='MsgForamt'>Message Format</a></li>
           <li><a href='CusFormat'>Customer Format</a></li>     
        </ul>
     </li>
    <li><a href="Sent_mail.jsp" >Mail</a></li>
     <li>Reports
        <ul>
           <li class="dir"><a href="BackLogReport.jsp">BackLog</a></li>
           <li class="dir"><a href="CustomerSearch.jsp">Customers</a</li>
           <li class="dir"><a href="MessageReport.jsp">Message</a></li>
         </ul>
     </li>
    <li><a href="LogOut.jsp">LogOut</a></li>
   </ul>                
 </div>   

  

我的CSS代码

 ul#nav {
            margin: 0 0 0 600px;       
        }
        ul.drop a 
          { 
            display:block;color: #fff; 
            font-family: ITC Avant Garde Demi; font-size: 14px; 
            text-decoration: none;
          }
        ul.drop, ul.drop li, ul.drop ul
          { 
            list-style: none; margin: 0; 
            padding: 0; border: 1px solid #000; 
            background: #000; color: #fff;
            font-family: ITC Avant Garde Demi;font-size: 14px; 
          }
        ul.drop 
          { 
            position: relative; z-index: 597; float: left; opacity: 0.7;filter: alpha(opacity=70);
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
            background-color: #000;
          }
        ul.drop li
          { 
            float: left; line-height: 1.5em; vertical-align: middle; zoom: 1; padding: 5px 12px;   
          }
        ul.drop li:hover, ul.drop li:hover 
          { 
            position: relative; z-index: 599; 
            cursor: default; background: #0066CC; 
          }
        ul.drop li ul li a:hover
          { 
            position: relative; z-index: 599; 
            cursor: default; background: #0066CC; zoom: 1.15;
          }
        ul.drop ul 
          { 
            visibility: hidden; position: absolute; 
            top: 100%; left: 0; 
            z-index: 598; width: 150px; 
            background: #555; 
            border: 1px solid #000; 
          }
        ul.drop ul li
         {
            float: none; 
         }
        ul.drop ul ul
        { 
            top: -2px; left: 100%; 
        }
        ul.drop li:hover > ul 
        { 
            visibility: visible 
        } 
          ul.drop li ul li
        {
            list-style: none; margin: 0; 
            padding: 6px ; border: 1px solid #000; 
            background: #000; color: #fff;opacity: 1;
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
            font-family: ITC Avant Garde Demi;font-size: 14px; 
         } 

  

IE8中的图像

  

IE9中的图像