html - CSS Bug with inline ul li in IE7 -
i've got little issue inline menu, bug appears in ie7. menu li has menu underneath it, not inline rest, rest seem appear pushed down.
html
<div id="topnav"> <ul id="jsddm"> <li id=""> <a id="" href="/">home</a> </li> <li id=""> <a href="/about.aspx">about</a> <ul style="visibility: hidden;"> <li> <a href="/about/board.aspx">board</a> </li> <li> <a href="/about/contact.aspx">contact</a> </li> </ul> </li> <li> <a href="/practices.aspx">practices</a> </li> <li> <a href="/how-we-work.aspx">how work</a> </li> <li> <a href="/patients.aspx">patients</a> </li> <li> <a href="/news-links.aspx">news & links</a> </li> <li> <a href="/link.aspx">link</a> </li> </ul> </div> css
#jsddm { margin: 0; padding: 0; width: 100%; } #jsddm li { display: inline-block; list-style: none; font: 12px tahoma, arial; width: 100px; text-align: center; } *+html #jsddm li { display:inline } * html #jsddm li { display:inline } #jsddm ul li { display: block; font: 12px tahoma, arial; } #jsddm li ul { margin: 0 0 0 0; padding: 0; position: absolute; visibility: hidden; border-top: 0px solid white; *margin: 0 0 0 -50px; /* ie 7 , below */ /* margin: 0 0 0 -50px\9; ie 8 , below */ } #jsddm ul li ul li { font: 12px tahoma, arial } #jsddm li { display: block; background: #009ee0; padding: 0; line-height: 28px; text-decoration: none; border-right: 0px solid white; width: 70px; color: #eaffed; white-space: nowrap; font-weight: bold; width: 100%; } #jsddm li a:hover { background: #1a4473} #jsddm li ul li { float: none; *margin: -2px 0 0 0; *padding:0; } +html #jsddm li ul li { } #jsddm li ul li { width: auto; background: #009ee0 font-weight: bold; } #jsddm li ul li a:hover { background: #0e559c } it uses jquery function display dropdownmenu does'nt effect static html/css.
thanks.
ie7 doesn't support inline-block. try float elements in - http://jsfiddle.net/ssdnd/1/
#jsddm li { display: inline-block; list-style: none; font: 12px tahoma, arial; width: 100px; text-align: center; *float: left; }
Comments
Post a Comment