I am facing an issue with my code that should create a dropdown menu when hovered on, but it is not working properly in Internet Explorer. Instead of dropping down the menu, IE pushes it to the right, making it impossible to interact with. Surprisingly, this code works perfectly fine in Firefox and Chrome, even though it was supposed to be compatible with IE according to the source I got it from.
As someone who is relatively new to coding and typically learns by copying and pasting code snippets, troubleshooting this on my own seems too challenging. Any assistance or guidance on resolving this issue would be highly appreciated :)
CSS:
#dropmenu,
#dropmenu ul {
list-style: none;
}
#dropmenu {
float: left;
width: auto;
}
#dropmenu li {
width: auto;
}
#dropmenu > li {
float: left;
width: auto;
}
#dropmenu li a {
display: block;
height: 2em;
line-height: 2em;
padding: 0 1.5em;
text-decoration: none;
}
#dropmenu ul {
position: absolute;
display: none;
z-index: 999;
}
#dropmenu ul li a {
width: 80px;
}
#dropmenu li:hover ul {
display: block;
}
/* Main menu
------------------------------------------*/
#dropmenu {
font-family: Arial;
font-size: 16px;
background: #;
}
#dropmenu > li > a {
color: #000;
font-weight: normal;
}
#dropmenu > li:hover > a {
background: #;
color: #000;
}
/* Submenu
------------------------------------------*/
#dropmenu ul {
background: #;
}
#dropmenu ul li a {
color: #000;
}
#dropmenu ul li:hover a {
background: #f16b20;
}
#dropmenu ul li:hover a {
color: white;
}
HTML:
<ul id="dropmenu">
<li><a href="#">Our Company</a>
<ul>
<li><a href="#">Hellenico</a></li>
<li><a href="#">Genere</a></li>
<li><a href="#">Indulgentia</a></li>
</ul>
</li>
<li><a href="#">Our Solutions</a>
<ul>
<li><a href="#">Hellenico</a></li>
<li><a href="#">Genere</a></li>
<li><a href="#">Indulgentia</a></li>
</ul>
</li>
<li><a href="#">Service Desk</a>
<ul>
<li><a href="#">Hellenico</a></li>
<li><a href="#">Genere</a></li>
<li><a href="#">Indulgentia</a></li>
</ul>
</li>
<li><a href="#">resources</a>
<ul>
<li><a href="#">Hellenico</a></li>
<li><a href="#">Genere</a></li>
<li><a href="#">Indulgentia</a></li>
</ul>
</li>
<li><a href="#">Contact</a>
<ul>
<li><a href="#">Hellenico</a></li>
<li><a href="#">Genere</a></li>
<li><a href="#">Indulgentia</a></li>
</ul>
</li>
</ul>