CSS is incredible, however its implementation in browsers has not been standardised, meaning that every browser has a slightly different default settings for how elements should be rendered. Luckily there is an easy fix in CSS to reduce the level of dissimilarity.
Add the following to the top of your CSS:
* {
margin: 0;
padding: 0;
color: #000;
background: #FFF;
font-style: inherit;
text-decoration: none;
font-size: 100%;
font-weight: normal;
}
Here is a really easy way to make a drop down list using CSS instead of JavaScript. This has many advantages over a JavaScript method, mainly it’s more search engine friendly and does not rely on users having JavaScript turned on.
<style type="text/css">
<!--
/* Style the links */
#exmaplebox a {
float:left;
text-decoration:none;
font-size:14px;
font-weight:bold;
height: 22px;
width: 100px;
text-align:center;
display:block;
padding: 0 10px 0 10px;
margin: 2px 10px;
border:1px solid #CCC;
}
#exmaplebox a:hover {
text-decoration:underline;
}
/* this bit is the drop down bit */
#exmaplebox ul {
float:left;
margin:0;
padding:0;
height: 26px;
width: 150px;
overflow:hidden;
list-style:none;
}
#exmaplebox ul:hover {
overflow:visible;
}
#exmaplebox ul li {
float:left;
width:300px;
margin:0;
padding:0;
}
-->
</style>
<div id="exmaplebox">
<a href="#link">Link</a>
<ul>
<li><a href="#link">Link</a></li>
<li><a href="#link">Large Sub-Link</a></li>
<li><a href="#link">Sub-Link</a></li>
</ul>
<ul>
<li><a href="#link">Long link</a></li>
<li><a href="#link">Sub-Link</a></li>
<li><a href="#link">Large Sub-Link</a></li>
</ul>
<a href="#link">Link</a>
</div>