Hi

Am working on a nifty navigation at the moment:

Code:
<div id="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a>
  <ul>
  <li><a href="#">History</a></li>
  <li><a href="#">People</a></li>
  <li><a href="#">Philosophy</a></li>
  </ul>
</li>
<li><a href="#">Contact</a></li>
<li><a href="#">Services</a></li>
</ul>
Anyway, the plan is for the top level navigation to float horizontally across the top, with the sub-navigation floating horizontally directly underneath it, like so:


Home | About | Contact | Services
History | People | Philosophy


To achieve this, I've assigned the following CSS rule, in order to break the sub-navigation out of the top level navigation:

Code:
#nav ul ul {position: absolute; top:8em; left:0}
This works in every browser I've tested on, except for IE/Mac, where the absolute positioning is ignored by the browser and the sub-nav displays in the top nav, like so:

Home | About | History | People | Philosophy Contact | Services

Any IE/Mac experts know why this is happening? I'm at a dead end!