I'm experiencing an issue with my HTML menu. It appears correctly on Chrome, the latest Firefox, and IE, but it looks terrible on my iPad and older versions of Firefox. Is there a way to ensure it works consistently across all platforms?
HTML:
<div id="navbar">
<ul>
<a href=/interpreters.php><li> Interpreters</li></a>
<li>Onsite
<ul>
<a href=/displayappointments.php?lookup=todayScheduled><li>Appointment Manager</li></a>
<a href =/newapp.php><li>New Appointment</li></a>
</ul></li>
<li>Telephonic
<ul>
<a href =/otp.php><li>New Call</li></a>
<a href =/otplog.php><li>OTP Log</li></a>
<a href =/otpraw.php><li>OTP Raw</li></a>
</ul></li>
<a href=/translation.php><li>Translation</li></a>
<li>Tools
<ul>
<a href=/teammessage.php><li>Team Message</li></a>
<a href=massemail.php><li>Mass Email</li></a>
<a href=uofuparser.php><li>U of U</li></a>
<a href=/incidenttracker/submitincident.php><li>Issue Tracker <? echo $count; ?></li></a>
<a href=medicaid.php><li>Medicaid<? echo $medcount; ?></li></a>
</ul></li>
<a href=sms.php><li>TXT<? echo $smscount; ?></li></a>
</div>
CSS:
#navbar {
width: 100%;
height: 30px;
background-color: #FFFFFF;
text-align: center;
}
#navbar ul {
margin: 0 auto 0 auto;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
text-align: center;
}
#navbar ul li {
float: left;
color: #333366;
padding: 0 8px 0 8px;
border-right: 1px solid #0099FF;
border-left: 1px solid #0099FF;
height: 30px;
list-style: none;
display: block;
line-height: 30px;
text-align: center;
cursor:pointer;
border-radius: 9px;
border-top-right-radius: 9px;
}
#navbar ul li:hover {
background-color: #e8edff;
}
#navbar ul li ul{
display:none;
position:absolute;
background-color:transparent;
padding:10px;
opacity:0.95;
}
#navbar ul li ul li{
float:none;
padding:0;
margin:0;
width:150px;
color:#333366;
background-color:#FFFFFF;
text-decoration:none;
z-index:100;
}
#navbar ul li ul li a{
color:#333366;
text-decoration:none;
}
#navbar ul li ul li a:hover{
color:#333366;
}
#navbar ul li:hover > ul{
display:block;
}
JS Fiddle: http://jsfiddle.net/n9TGH/
When displayed correctly it looks like this: On my iPad and older versions of firefox it looks like this: