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
image in ie9
Comments
Post a Comment