html - Drop Down Menu is not working in lesser version than IE9 -


the css , html code working fine in internet explorer9 .the drop down working fine in ie9 , higher.but changing alignment in lower version of ie , drop down disappears.can guide me how make work in lower version of ie or correction should done in codes.

my html code

 <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>    

my css code

 ul#nav {             margin: 0 0 0 600px;                }         ul.drop            {              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;           }  

image in ie8

image1

image in ie9

image in ie9


Comments

Popular posts from this blog

toolbar - How to add link to user registration inside toobar in admin joomla 3 custom component -

linux - disk space limitation when creating war file -