CSS/Javascript 3 level navigation bar

I need css/javascript code for building a navigation bar that works in IE6,7/firefox/safari and opera. ## Deliverables I have attached a image file that shows how the end navigation bar should look and function in following mentioned browsers. IE6,7,8/firefox3+/safari/opera The root level links appear horizontal. The first level child links, displays vertical, when mouse hovers on one of root links. The second level child links (e.g. Test Bio, Test Bio2 in image attach), displays also vertical to the right of parent first level child link, when mouse hovers over it. NOTE: the nav bar is built dynamically by the system, here is example of code generated: The name of the page is also used as an id of the li tag. <ul id='nav'> <li id='active'><a id='Home' href='#'><img height='15' src='[login to view URL]' width='14' border='0'/></a></li> <li id='Collaboration Services'><a href='#'>Services</a> <ul> <li id='Phone Conferencing'><a href='#'>Phone Conferencing</a></li> <li id='Web Conferencing'><a href='#'>Web Conferencing</a></li> <li id='Webcast Webinar'><a href='#'>Webcast Webinar</a></li> <li id='Virtual Event'><a href='#'>Virtual Event</a></li> </li> </ul> </li> <li id='Investor Relations Webcast'><a href='#'>Conferencing Solutions</a> <ul> <li id='Lead Generation Webinar'><a href='#'>Lead Generation Webinar</a></li> <li id='Online Training Solution'><a href='#'>Online Training Solution</a></li> <li id='Product Launch'><a href='#'>Product Launch</a></li> <li id='Virtual Trade Show'><a href='#'>Virtual Trade Show</a></li> <li id='Small Business Conferencing'><a href='#'>Small Business Conferencing</a></li> <li id='Corporate Conferencing'><a href='#'>Corporate Conferencing</a></li> <li id='Project Management Collaboration'><a href='#'>Project Management Collaboration</a></li> </li> </ul> </li> <li id='Contacts'><a href='#'>Customers Tools</a> <ul> <li id='Downloads'><a href='#'>Downloads</a></li> <li id='Documentation'><a href='#'>Documentation</a></li> <li id='Essential Conferencing Resources'><a href='#'>Conferencing Resources</a> <ul> <li id='International Organizations Communication'><a href='#'>International Organizations Communication</a></li> </ul> </li> </ul> </li> <li id='Our Company'><a hre='#'>Our Company</a> <ul> <li id='Mission Statement'><a href='#'>Mission Statement</a> <ul> <li id='Test Bio'><a href='#'>Test Bio</a></li> <li id='Test Bio2'><a href='#'>Test Bio2</a></li> </ul> <li id='Mission Statement2'><a href='#'>Mission Statement2</a></li> <li id='Core Values'><a href='#'>Core Values</a></li> <li id='Locations'><a href='#'>Locations</a> <ul> <li id='New York Office'><a href='#'>New York Office</a></li> </ul> </li> <li id='Careers'><a href='#'>Careers</a></li> <li id='Press'><a href='#'>Press</a></li> </li> </ul> </li> </ul>