CSS Drop-Down Menu: Safari Problem

[TheCrazyLexx]

Hi there,

I want to integrate this wonderful css drop-down menu on my site:
CSS Play Menu

However, after changing the style to match the look of my site and including small icons to the submenus, the submenu are suddently not displayed correctly anymore on a Safari browser:


Instead of a horizontal list-style the item are arranged vertically.

Maybe someone can show me what I've done wrong, since the menu works fine in Safari in its original form.

Live Test

[boogyman]

whereever you have your submenu put

ul#menu li ul.submenu li {display: inline;}

if you set up the structure like

<ul id="menu">
     <li>
          <ul class="submenu">
               <li>SUB LINK</li>
          </ul>
     </li>
</ul>

[TheCrazyLexx]

I'm sorry, but I still couldn't fix this problem. Here's part of the code I'm using and which can be seen in the screenshot above:

<ul id="nav">
<li class="top">
<a href="#nogo27" id="contacts" class="top_link"><span class="down">BILDER &amp; VIDEOS</span><!--[if gte IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub">

   <li><a href="#nogo28">Support</a></li>
   <li><a href="#nogo29" class="fly">Sales<!--[if gte IE 7]><!--></a><!--<![endif]-->

<!--[if lte IE 6]><table><tr><td><![endif]--><ul>
   <li><b>European</b></li>
   <li><a href="#nogo34" class="fly">British<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]--><ul>
        </li>
    <li><a href="#nogo44">French</a></li>
    <li><a href="#nogo45">German</a></li>
    <li><a href="#nogo46">Spanish</a></li>
    <li><b>Worldwide</b></li>
    <li><a href="#nogo30">USA</a></li>
    <li><a href="#nogo31">Canadian</a></li>
    <li><a href="#nogo32">South American</a></li>
    <li><a href="#nogo47">Australian</a></li>
    <li><a href="#nogo48">Asian</a></li>
</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul> 

#nav {padding:0; margin:0; list-style:none; height:38px; background:#fff url(six_0.gif) repeat-x; position:relative; z-index:200; font-family:arial, verdana, sans-serif;}
#nav li.top {display:block; float:left;}
#nav li a.top_link {display:block; float:left; height:35px; line-height:35px; color:#ccc; text-decoration:none; font-size:13px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;background: url(six_0.gif);}
#nav li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(six_0.gif) right top no-repeat;}
#nav li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(six_0a.gif) no-repeat right top;}

#nav li:hover a.top_link,
#nav a.top_link:hover
{color:#fff; background: url(six_1.gif) no-repeat;}
#nav li:hover a.top_link span, 
#nav a.top_link:hover span
{background:url(six_1.gif) no-repeat right top;}
#nav li:hover a.top_link span.down,
#nav a.top_link:hover span.down
{background:url(six_1a.gif) no-repeat right top; padding-bottom:3px;}

#nav table {border-collapse:collapse; padding:0; margin:0; position:absolute; left:0; top:0;}

#nav li:hover {position:relative; z-index:200;}
#nav a:hover {position:relative; white-space:nowrap ; z-index:200;}

#nav :hover ul.sub
{left:1px; top:38px; background: #a5a4a9; background:transparent url(opaque.png);  padding:10px; border:1px solid #FFFFFF; white-space:nowrap; width:auto; height:auto; z-index:300;}
#nav :hover ul.sub li
{display:block; height:20px; position:relative; float:left; width:auto; font-weight:normal; }
#nav :hover ul.sub li a
{display:block; font-size:14px; height:18px; width:160px; line-height:18px; text-indent:5px; color:#FFFFFF; text-decoration:none;border:1px transparent;}
#nav li ul.sub li a.fly
{background:transparent url(arrow.gif) right no-repeat;}
#nav :hover ul.sub li a:hover 
{background:#fec009; color:#fff; border-color:#fff;}
#nav :hover ul.sub li a.fly:hover
{background:#fec009 url(arrow_over.gif) right no-repeat; color:#fff;}

#nav li b {display:block; font-size:13px; font-weight:bold; height:18px; width:auto; line-height:18px; margin-bottom:3px; text-indent:6px; color:#444444; cursor:default;}

#nav a:hover a:hover ul,
#nav a:hover a:hover a:hover ul,
#nav a:hover a:hover a:hover a:hover ul,
#nav a:hover a:hover a:hover a:hover a:hover ul
{left:89px; top:-4px; background: #50b5d0; padding:10px; border:1px solid #0b4d97; white-space:nowrap; width:auto; z-index:400; height:auto;}

#nav ul, 
#nav a:hover ul ul,
#nav a:hover a:hover ul ul,
#nav a:hover a:hover a:hover ul ul,
#nav a:hover a:hover a:hover a:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

#nav li:hover li:hover > ul
{left:160px; top:-4px; background: #a5a4a9; background:transparent url(opaque.png); padding:10px; border:1px solid #FFFFFF; white-space:nowrap; width:auto; z-index:400; height:auto;}
#nav li:hover > ul ul 
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}
#nav li:hover li:hover > a.fly
{background:#fec009 url(arrow_over.gif) right no-repeat; color:#fff; border-color:#FFFFFF;} 
#nav li:hover li:hover > li a.fly
{background:#a5a4a9 url(arrow.gif) right no-repeat; color:#000; border-color:#FFFFFF;}

[TheCrazyLexx]

Anyone? I still could get this thing to work properly :-(

[MrBaby113115]

Could you tell me how I can use this menu with sitemap in ASP.NET? and if I want to change to another color, so where will i have to change?. Thank first.