css drop down menu not working on hover -
i have simple menu when hover have drop down menu. code working when testing in fiddle not working on ie when run whole page locally. can help
(here's code @ fiddle)[http://jsfiddle.net/bacbw]
<div align="left" id="floating-menu"><font class="subheading"> <ul class="dropmenu"> <li><a href="#">main menu</a> <ul class="dropmenu"> <li>welcome</li> <li>personal information</li> </ul> </li> </ul> </font></div>
general.css
/* ul */ #floating-menu ul { list-style-type: none; width: auto; height: 30px; background: #ff0040; } /* li */ #floating-menu ul li { padding: 5px 10px; height: 30px; position: relative; } /* first level li */ #floating-menu>ul>li { float: left; height: 30px; line-height: 27px; text-aligh: center; color: #9c9c9c; } #floating-menu li ul { display: none; position: absolute; left: 0; width: 200px; } #floating-menu li:hover ul { display: block; } #floating-menu li li { border-bottom: 1px solid #ffffff; } #floating-menu li li:hover { background: #5e8ce9; } .dropmenu { _zoom:1; } .dropmenu:after { content: ""; clear: both; display: block; }
check jsfiddle link here , below corrected css. tested in firefox, chrome, , ie 7, 8 , 9. working properly.
#floating-menu { width:940px; padding:10px; *padding:5px 10px; margin:0 auto; border:1px solid green; background-color:#3d3a40; border:8px solid #fff; } #floating-menu ul { list-style-type: none; line-height:30px; background: #ff0040; } #floating-menu ul li { position:relative; display:inline-block; *float:left; } #floating-menu ul li { color:#fff; text-decoration:none; display:block; padding:0 20px; cursor:pointer; } #floating-menu ul li:hover { color:#fff; background-color:#5e8ce9; cursor:pointer; } #floating-menu ul li ul { display:none; position:absolute; left:0; top:30px; background-color:#5e8ce9; width:200px; line-height:18px; } #floating-menu ul li ul li { border-bottom:1px solid #91b3f7; display:block; *float:none; } #floating-menu ul li ul li { color:#fff; background-color:#0066ff; cursor:pointer; padding:5px 10px; } #floating-menu ul li ul li a:hover, #floating-menu ul li ul li a.active { color:#fff; background-color:#0000ff; } #floating-menu ul li:hover ul { display:block !important; } .dropmenu { _zoom:1; }
Comments
Post a Comment