Can you assist me with a challenge I am facing? I am currently working on creating a dropdown menu using only HTML and CSS. However, I have encountered an issue where the hover function is not functioning properly in IE10, although it works perfectly fine in browsers like Firefox and Chrome.
This is my HTML code:
<html>
<head>
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="style.css" />
<![endif]-->
<link rel = "stylesheet" type = "text/css" href = "style.css" />
</head>
<body>
<div class = "centeredmenu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Client</a>
<ul>
<li><a href="#">Create Client</a></li>
<li><a href="#">View Clients</a></li>
</ul>
</li>
<li><a href="#">Invoices</a>
<ul>
<li><a href="#">Search</a></li>
<li><a href="#">View All</a></li>
</ul>
</li>
<li><a href="#">Suppliers</a>
<ul>
<li><a href="#">Add Supplier</a></li>
<li><a href="#">View All</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
This is the CSS Code:
.centeredmenu ul li ul { display:none; }
.centeredmenu ul li:hover > ul { display:block; }
.centeredmenu ul li ul li ul { display:none; }
.centeredmenu ul li ul li:hover > ul { display:block; }
.centeredmenu ul {
background:#9bbe3c;
width:99.8%;
margin-top:0.5%;
z-index:1;
list-style:none;
position:relative;
display:inline-table;
font-family:'Calibri' !important;
font-size:1em;
border:1px solid #596f1b;
}
.centeredmenu ul:after { content: ""; clear:both; display:block; }
.centeredmenu ul li { float:left; }
.centeredmenu ul li a {
display:block;
color:#fff;
text-decoration:none;
padding:14px 22px 14px 23px !important;
}
.centeredmenu ul li a:hover{ background:#586f1b; }
.centeredmenu ul li ul { background:#9bbe3c; position:absolute; top:94.5%; width:200px; }
.centeredmenu ul li ul li { float:none; position:relative; }
.centeredmenu ul li ul li ul { background:#9bbe3c; position:absolute; left:101%; top:-1%; }