Hi
Am working on a nifty navigation at the moment:
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: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>
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:
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:Code:#nav ul ul {position: absolute; top:8em; left:0}
Home | About | History | People | Philosophy Contact | Services
Any IE/Mac experts know why this is happening? I'm at a dead end!






.
Bookmarks