IE/Mac ignoring absolute positioning
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!