Having issues with the CSS dropdown menu not activating when hovering

I am facing an issue with a simple menu that includes a dropdown feature upon hovering. The code works perfectly fine in Fiddle, however, it fails to work when running the entire page locally on IE. Can someone please assist me?

(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

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

/* Styles for all LI */
#floating-menu ul li {
        padding: 5px 10px;
        height: 30px;
        position: relative;

}

/* First Level LI Styling */
#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;
}

Answer №1

Take a look at the corrected CSS in the jsFiddle link provided below. I have tested it thoroughly on Firefox, Chrome, and IE versions 7, 8, and 9, and it is functioning perfectly.

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

Answer №2

Just to reiterate, your code is functioning properly in IE9.

To determine the cause of the issue, please press F12 to access developer tools and adjust the document type.

It appears that the page is currently in Quirks mode.

!--  Ensure IE uses the most up-to-date rendering engine -->  
<meta http-equiv="X-UA-Compatible" content="IE=edge">

By specifying that IE should use its latest rendering engine version while loading your page. But what if a user only has an IE8 browser? In this case, the approach will likely not work as intended.

You can refer to MSDN Library for more information.

We hope this clarifies things for you.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for aligning text vertically in a column using CSS columns

Can text be vertically aligned in CSS columns? For example, aligning text to the top, center, or bottom within each column? I attempted to use vertical-align, but it doesn't seem to work on an unordered list or its items: html <div class="nav-ba ...

Tips for Creating Sand Text Effects in CSS (Using Text-Shadow)

I am attempting to create a CSS effect that resembles text written in the sand. Here is an example of what I am trying to achieve: As a newcomer to CSS, I would appreciate any guidance on how to make this effect possible. I have tried using the following ...

When the textfield mui is set to shrink, an additional space appears in the label when using a font size of 12px

Struggling to customize the appearance of the textField component, particularly with the label when it is minimized: import * as React from "react"; import TextField from "@mui/material/TextField"; import { createTheme } from "@mui ...

Microsoft Edge and Google Fonts display strong and distinctive lettering

When using Microsoft Edge on Windows 10, all text appears with bold UTF-8 characters: I'm unsure of what the issue is. Is there a solution available? ...

Collapsing table row in Bootstrap upon button click within the same row

The snippet showcases a basic table with one row containing a button group. Upon clicking the 'main' button (the reset button), the following table row will appear. This behavior is intended only when clicking on the table row itself, not the but ...

An effective method to arrange divs in a line adjacent to each other

Apologies for the repetitive question, but I am in need of some answers. In my opinion: Having 1 div with a width of 100% and 2 divs inside each with a width of 50%. Why does it not fit properly? HTML: <div id="top-menu"> <div id="logo">& ...

Jquery adds a fun, wobbly effect to animations

I'm experiencing an issue with the animation I've implemented causing some slight shaking and wobbling of the text and certain elements which is affecting the overall look. You can view a live example of this behavior here: This problem specific ...

Turn off the CSS hover effect for a custom button if the ng disabled attribute is set to true

My goal is to disable custom buttons, and the disable(pointer) function is working correctly. The issue arises when we try to hover on the button, as the hover effect still works. I therefore need to disable hover as well. I am looking to apply ng-disabl ...

Next.JS CSS modules are experiencing issues with functionality

Organizing the CSS structure for a project by creating a module of CSS for each component or page can sometimes present challenges. Take a look at the code snippet below: .navbar { display: flex; justify-content: flex-start; align-items: center; pa ...

Jquery Droppable issue arising with dynamically added DIVs

I am facing a similar issue as described in this question and this one I am trying to implement drag-and-drop and resize functionality. It is working fine for static elements, but I encounter issues when adding dynamic divs. The resize property works prop ...

buttons are arranged horizontally, stacked neatly on top of one another

I'm currently working on a setup for toggle buttons using absolute positioning for labels on top of checkboxes. My goal is to have them aligned horizontally, but instead, they are stacking on top of each other. <ul style="display: block; float: le ...

Applying the jqtransform plugin to all forms except for one

We've implemented the jQuery jqtransform plugin to enhance the appearance of our website's forms. However, there is one particular form that we'd like to exclude from this transformation. I made adjustments to the script that applies jqtrans ...

swap between style sheets glitching

My website features two stylesheets, one for day mode and one for night mode. There is an image on the site that triggers a function with an onclick event to switch between the two stylesheets. However, when new visitors click the button for the first ti ...

Tips for inserting a personalized image or icon into the ANTD Design menu

Can anyone help me figure out how to replace the default icons with a custom image or icon in this example: https://ant.design/components/layout/#components-layout-demo-side I attempted to do it by including the following code: <Menu.Item to="/" key=" ...

Having trouble adjusting the width of a Material-UI modal in React?

I'm having trouble adjusting the width of the dialog box to show all of the content without adding a horizontal scroll bar. I noticed that the blur effect is applied to most of the page, so why isn't the form extending with it? Any assistance on ...

Display the X button solely once text has been inputted into the textbox

I have integrated a text clearing plugin from here in my project to allow users to clear the input field by clicking on an X button. However, I want to modify the code so that the X button only appears when there is text entered in the textbox. I attempt ...

bootstrap navigation bar collapsible menu

Struggling with making the hamburger menu appear on my friend's site. Spent hours trying to troubleshoot, but still can't figure out why it's only showing up as a red box and appearing on larger screens instead of just smaller devices. Frust ...

Tips to center a circular progress bar in Material UI

Does anyone know how to properly center-align a circular progress bar in a login form using material UI? I'm having trouble with it not being positioned correctly: screenshot {isLoading && <CircularProgress />} {user?.ema ...

Utilize viewport activation to determine browser width

Is there a way to dynamically add the viewport-meta tag only for devices with screen widths larger than 680px? If the screen is smaller than 680px, then the responsive style file should be enabled instead. I attempted to achieve this by placing the follow ...

Show me how to customize the default confirmation box using just CSS!

Is it possible to style the standard window.confirm using only CSS without any additional JavaScript code? If so, how can this be achieved? ...