Chrome and Safari are working perfectly fine, but I encountered an issue with IE and FF where the submenu menu appears on the left side of the main navigation. The website in question is cedumilam.php.cs.dixie.edu. Below is the CSS code I am using:
#nav {
margin: auto;
z-index: 10;
display: inline;
text-transform: uppercase;
text-align: center;
}
#nav ul {
width:570;
margin:0px auto 2px auto;
text-align:center;}
#nav ul li{display: inline;
position:relative;
z-index:99;
}
#nav li:hover { position: relative }
#nav li:hover > a {
color: #845343;
text-decoration:underline;
}
#nav li.sub:hover > a {
border-radius: 10px 10px 0 0;
-moz-border-radius: 10px 10px 0 0;
-webkit-border-radius: 10px 10px 0 0;
}
#nav li a {
color: black;
font-weight: bold;
text-decoration: none;
padding: 15px;
display: inline;
}
#nav li ul {
background: #fff;
margin-top: 5px;
display: none;
}
#nav li:hover ul {
display:block;
position:absolute;
}
#nav li ul {
background: white;
padding: 2px;
}
#nav li ul li a, #nav li ul li a:hover {
background: transparent;
color: #000;
width: 250px;
font-size: 0.95em;
font-weight: normal;
}
#nav li ul li a:hover {
color: #845343;
text-decoration: underline;
}