Having trouble with a CSS dropdown menu displaying incorrectly in IE, while working fine on other browsers.
<body>
<div id="container">
<header>
<div id="hlogo">
<a href="index.html">title</a>
</div>
<nav id="hmenu">
<ul>
<li>
<a href="menu1.html">menu1</a>
</li>
<li>
<a href ="menu2.html">menu2</a>
<div id="items" class="hiddenMenu">
<a href="submenu1.html">submenu1</a>
<a href="submenu2.html">submenu2</a>
<a href="submenu3.html">submenu3</a>
<a href="submenu4.html">submenu4</a>
</div>
</li>
<li>
<a href ="menu3.html">menu3</a>
</li>
<li>
<a href ="menu4.html">menu4</a>
</li>
</ul>
</nav>
</header>
<section id="container-body">
<div id="content">
</div>
</section>
</div>
This is the HTML markup I'm using along with the following CSS styling.
/* layout styles */
*{margin:0;padding:0;font-family:Arial;}
header{overflow:hidden;}
body{background-color:#cc3333;}
a {display: inline-block;font-weight: bold;text-decoration:none;}
footer {
display:block;
position:relative;
width:100%;
}
footer > #disclamer {
margin-left: auto;
margin-right: auto;
width: 200px;
padding-bottom:5px;
font-size:small;
font-weight: bold;
}
#container{
background-color:#ffffff;
margin:auto;
min-width:756px;
width:60%;
overflow:hidden;
border:solid 2px #666666;
margin-top:10px;
margin-bottom:10px;
box-shadow:0 1px 3px rgba(0,0,0,0.6);
}
#hlogo {float:left;height:105px;width:181px;padding:10px;}
#hlogo a{background-position: 0px 0px;float:left;display:inline;height:105px;text-indent:-999999em;width:181px;}
#hlogo a{background-image:url('../images/logo.png');background-repeat:no-repeat;overflow:hidden;}
#hmenu{margin-top:45px;padding:10px;}
nav {
list-style:none;
display:inline;
float:right;
}
nav ul{
list-style: none;
text-align:center;
background-color:#666666;
float:left;
}
nav ul li {
width:128px;
float:left;
display:inline-block;
}
nav ul li:hover{
background-color:#cc3333;
cursor:pointer;
}
nav ul li a {
color:#ffffff;
padding:10px;
}
nav ul {
background: #222 url('../images/overlay.png') repeat-x;
color: #fff;
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
cursor: pointer
}
section {margin:10px;}
#container > header {display:block;}
#container-body {
background-color:#ececec;
height:600px;
display:block;
overflow:auto;
}
#container-body > #content {
margin: 10px;
height:95%;
position:relative;
}
.hiddenMenu
{
position:absolute;
z-index: 150;
background: #222 url('../images/overlay.png') repeat-x;
color: #fff;
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
cursor: pointer;
width: inherit;
}
.hiddenMenu > a
{
position:relative;
text-align: left;
clear:both;
font-size:0.75em;
}
nav li .hiddenMenu > a
{
display:none;
}
/*nav li:hover .hiddenMenu > a
{
display:block;
}*/
nav li .hiddenMenu > a:hover
{
background-color:#cc3333;
cursor:pointer;
border: 1px black solid;
}
The menu works as expected on Firefox but not on IE, showing only the first submenu item and then disappearing. Any ideas on how to fix this issue would be greatly appreciated!
Edit: Added code snippets for better understanding of the situation.
One workaround could be changing the overflow property from hidden to visible on the header tag, though it might impact the overall layout. Are there any alternative solutions or am I missing something?
Additionally, a jQuery script manages the menu's display behavior, which seems to fail on IE when hovering over submenu items. Why does this occur despite the script being properly implemented?