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

Popular posts from this blog

php - Calling a template part from a post -

Firefox SVG shape not printing when it has stroke -

How to mention the localhost in android -