css drop down menu not working on hover

Question

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;
}

be specific In IE which version. it is working in IE10 and 9 and please post the code here, fiddle is not substitute. — Praveen
– Praveen, Commented Jul 18, 2013 at 11:29
Just added the fiddle. the drop down menu is within a left_navigation.jsp which is embedded in index.jsp calling a general css file on index.jsp. — YUKI ML
– YUKI ML, Commented Jul 18, 2013 at 11:31
Check the document mode in IE, press F12 and check, because working for me in IE9. — Praveen
– Praveen, Commented Jul 18, 2013 at 11:33

Swarnamayee Mallia · Accepted Answer · 2013-07-18 12:36:57Z

4

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;
    }

answered Jul 18, 2013 at 12:36

Swarnamayee Mallia

2,00814 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

YUKI ML Over a year ago

Really appreciate.. this is looking very good for my site. May I know if user wants to display the menu vertically instead of the current one... which part of code should I change? Thanks!!!

Swarnamayee Mallia Over a year ago

See the link here jsfiddle.net/ejRM4/2 #floating-menu ul { list-style-type: none; line-height:30px; background:#FF0040; width:200px;/*newly added*/ } #floating-menu ul li ul { display:none; position:absolute; left:200px;/*newly added*/ top:0;/*newly added*/ background-color:#5e8ce9; width:200px; line-height:18px; }

Praveen · Accepted Answer · 2013-07-18 12:01:50Z

1

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.

answered Jul 18, 2013 at 12:01

Praveen

56.7k35 gold badges137 silver badges169 bronze badges

1 Comment

Praveen Over a year ago

@YUKIML I'm glad that I was able to help.

Collectives™ on Stack Overflow

css drop down menu not working on hover

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related