CODEWITHSUNDEEP
cssdrop-down-menumenu
YUKI ML
YUKI ML

Reputation: 13

css drop down menu not working on hover

I have a simple menu that when hover it will have a drop down menu. The code is working when testing in Fiddle but not working on IE when run the whole page locally. Can anybody help

(here's my code at 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

    /* All UL */
    #floating-menu ul {
    list-style-type: none;
    width: auto;
    height: 30px;
    background: #FF0040;
}

/* All 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;
}

Upvotes: 1

Views: 5259

Answers (2)

Swarnamayee Mallia
Swarnamayee Mallia

Reputation: 2008

Check the jsFiddle link here and below corrected CSS. Also tested in Firefox, chrome, and ie 7, 8 and 9. It 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 a {
    color:#fff;
    text-decoration:none;
    display:block;
    padding:0 20px;
    cursor:pointer;
    }
#floating-menu ul li:hover a {
    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 a {
    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;
    }

Upvotes: 4

Praveen
Praveen

Reputation: 56539

As I said in comments, your code works fine in IE9.

The reason, press F12 to get developer tools and change the document type.

As you said it is in Quirks mode

!--  Force IE to use the latest version of its rendering engine -->  
<meta http-equiv="X-UA-Compatible" content="IE=edge">

By telling IE to use the latest version of its rendering engine in your page. Incase if your user has only IE8 browser? This will certainly fails.

You can check this in MSDN Library.

Hope you understand.

Upvotes: 1

Related Questions