Can you help me with this issue I'm having with my website design? In Google Chrome, Opera, and Safari, everything looks great. But in Firefox and the latest version of IE, it's a different story.
Here is the HTML code:
<div id="navbar">
<ul>
<li class="selected">
<a href="index.html">HOME</a>
</li>
<li>
<a href="#">OUR FACILITIES</a>
</li>
<li>
<a href="#">ABOUT US</a>
<ul>
<li>
<a href="#">MEET THE STAFF</a>
</li>
</ul>
</li>
<li>
<a href="#">CONTACT US</a>
<ul>
<li>
<a href="#">RESERVATIONS</a>
</li>
<li>
<a href="#">DIRECTIONS</a>
</li>
</ul>
</li>
</ul>
</div>
This is my CSS code:
#navbar {
margin-top: 87px;
}
#navbar ul {
list-style: none;
background-color: transparent;
}
#navbar ul li {
font-family: magic;
font-size: 1.6em;
background-color: #85CE85;
display: inline-block;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 45px;
padding-right: 45px;
}
#navbar .selected {
background-color: #CCFFCC;
}
#navbar ul li ul {
display: none;
background-color: transparent;
width: 245px;
height: 130px;
margin-top: 20px;
margin-left: -85px;
font-family: SkyHaven;
font-size: .7em;
}
#navbar ul li:hover > ul {
display: inline-block;
position: fixed;
}
#navbar ul li ul li {
width: 175px;
border-top: 1px black dashed;
background-color: #85CE85;
}
#navbar ul li ul li:hover {
background-color: #6699FF;
}
#navbar ul li a {
text-decoration: none;
color: black;
font-weight: bold;
}
#navbar a:hover {
color: white;
transition: .2s;
}
#navbar li:hover {
background-color: #CC0000;
transition: .8s;
}
If you can provide any insight or suggestions on how to fix this compatibility issue, I would greatly appreciate it. Thank you!