Here is some HTML and CSS code that showcases a fixed header and a menu that appears on hover:
<style type="text/css">
.header {
position: fixed;
top: 0;
width: 100%;
height: 50px;
background: #AAA;
}
.menu {
position: relative;
float: right;
margin-right: 100px;
}
ul {
display: none;
position: absolute;
top: 100%;
height: 50px;
width: 100px;
background: #CCC;
color: #C00;
}
.menu:hover ul {
display: block;
}
</style>
<div class="header">
<div class="menu">
<a>HOVER~</a>
<ul><li>SHOW ME!!</li></ul>
</div>
</div>
I have tested this code in IE8 and it works fine, but when I uploaded it online, the menus are not visible. It seems like they are being hidden by the parent element even though they shouldn't be. I've tried adjusting various CSS properties and z-index values but haven't been able to solve the issue.