As much as I know you would not want to hear this mine works fine? Could you paste up your source code?

I will post it in two sections - the css and then the silverstripe code. Honestly I have made almost no changes from the files that you posted. Check out www.bmcsports.com if you will and see if it gives you the same symptoms.

Thank you so much for your help.

Here is the css code:

#pad {height:135px;}
/* ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssmenus.co.uk
Copyright (c) 2009- Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */
#menu1 {padding:0; margin-top:0px;  list-style:none; height:30px; position:relative; z-index:500; font-family:arial, verdana, sans-serif; }
#menu1 li {float:left; margin-right:1px;}
#menu1 li a {display:block; float:left; height:30px; line-height:30px; color:#000; text-decoration:none; font-weight:bold; padding:0 30px 0 25px; opacity:.90; filter: alpha(opacity:90); }


#menu1 table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}

/* Default link styling */

/* Style the list OR link hover. Depends on which browser is used */

#menu1 li a:hover {z-index:200; position:relative;color:#fff; }
#menu1 li:hover {position:relative; z-index:200;}

#menu1 li:hover > a {color:#fff; background:#f8b101;}
#menu1 li:hover > a.sub {color:#fff; background-color:#f8b101;}

#menu1 li.current a {color:#fff; background:#3e3e3e;}

#menu1 li a.sub {background: #E3E3E3;}
#menu1 li.current a.sub {color:#fff; background:#3e3e3e /* url(../images/down-arrow.gif) no-repeat right center */ ;}

#menu1 :hover ul {left:0; top:30px; width:120px; background:#444;}

/* keep the 'next' level invisible by placing it off screen. */
#menu1 ul, 
#menu1 :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

#menu1 :hover ul :hover ul
{left:120px; top:-1px; background:#f8b101; white-space:nowrap; width:100px; z-index:200; height:auto;}

#menu1 :hover ul li {margin:0; border-top:1px solid #666;}
#menu1 :hover ul li a {width:180px; padding:0; text-indent:10px; background:#333; color:#ccc; height:30px; line-height:30px;}
#menu1 :hover ul li a.fly {background:#333 /* url(../images/right-arrow.gif) no-repeat right center */ ;}

#menu1 :hover ul :hover {background-color:#f8b101; color:#fff;}
#menu1 :hover ul :hover a.fly {background-color:#f8b101; color:#fff;}

#menu1 :hover ul li.currentsub a {background:#595959; color:#fff;}
#menu1 :hover ul li.currentsub a.fly {background:#595959 /* url(../images/right-arrow.gif) no-repeat right center */ ; color:#fff;}

#menu1 :hover ul :hover ul li a {width:180px; padding:0; text-indent:10px; background:#3e3e3e; color:#ccc;}
#menu1 :hover ul :hover ul :hover {background-color:#f8b101; color:#fff;}

#menu1 :hover ul :hover ul li.currentfly a,
#menu1 :hover ul :hover ul li.currentfly a:hover {background:#595959; color:#fff;}

And here is the Silverstripe code:

<!-- [if IE6]><div id="IE6"><![endif]-->
<ul id="menu1">
	<% control Menu(1) %>
		<% if Children %>
			<li class="$LinkingMode"><a href="$Link" class="sub" title="View more info about $Title"><span>$MenuTitle</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
				<!--[if lte IE 6]><table><tr><td><![endif]-->
				<ul class="fly $LinkingMode">
					<% control Children %>
						<% if Children %>
                        <li class="$LinkingMode"><a href="$Link" class="fly" title="View more info about $Title"><span>$MenuTitle</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
                        <!--[if lte IE 6]><table><tr><td><![endif]-->
				<ul>
					<% control Children %>
                         <li><a href="$Link" title="View more about $Title" class="$LinkingMode">$MenuTitle</a></li>
                         <% end_control %>
                         </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
			</li>
                        <% else %>	
                        
                        
                        <li><a href="$Link" title="View more about $Title" class="fly $LinkingMode">$MenuTitle</a></li>
                        <% end_if %>
					<% end_control %>
				</ul>
			<!--[if lte IE 6]></td></tr></table></a><![endif]-->
			</li>
		<% else %>	
			<li class="$LinkingMode"><a href="$Link" class="top_link" title="View more info about $Title"><span>$MenuTitle</span></a></li>
		<% end_if %>
	<% end_control %>
</ul>
<!-- [if IE6]></div><![endif]-->

Try this it may have something to do with the fly class

<!-- [if IE6]><div id="IE6"><![endif]-->
<ul id="menu1">
<% control Menu(1) %>
<% if Children %>
<li class="$LinkingMode"><a href="$Link" class="sub" title="View more info about $Title"><span>$MenuTitle</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="fly $LinkingMode">
<% control Children %>
<% if Children %>
<li class="$LinkingMode"><a href="$Link" class="fly" title="View more info about $Title"><span>$MenuTitle</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<% control Children %>
<li><a href="$Link" title="View more about $Title" class="$LinkingMode">$MenuTitle</a></li>
<% end_control %>
</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<% else %>

<li><a href="$Link" title="View more about $Title" class="$LinkingMode">$MenuTitle</a></li>
<% end_if %>
<% end_control %>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<% else %>
<li class="$LinkingMode"><a href="$Link" class="top_link" title="View more info about $Title"><span>$MenuTitle</span></a></li>
<% end_if %>
<% end_control %>
</ul>
<!-- [if IE6]></div><![endif]-->

It's still not working. What is the url to the site where you have this implemented? I would like to check it in my browser.

not a bad idea... why did i think of that. sorry

http://conag.com.au

Well FINALLY, after about 4 hours of debugging, I isolated the culprit! It evidently is a problem with the "overflow: auto;" feature. I modified the contentContainer section as follows:

#ContentContainer {
clear:left;
background: #fff;

padding-top:20px;
padding-bottom:20px;
width:900px; /* ADDED THIS LINE */
display:inline-block; /* ADDED THIS LINE */
/* overflow: auto; */ /* COMMENTED THIS LINE OUT */
}

Works like a charm now.

Thanks for all your help!!

Hi!

Thanks DrWebGuy! This floats disappearing in Firefox were driving me crazy…

Could you please develop why it is «evident» that the problem was the overflow:auto? I think that this propriety had to be added there for layout stability, it was certainly not arbitrary, but I stupidly did not comment that line.

Best regards,
Juan

Hi DrWebGuy,

I like the site you have put together http://www.bmcsports.com/ using SilverStripe CMS.

Can you please help me implement the drop down for my site, http://www.sunnynook.school.nz/ which uses OLIVESUNSET theme.

I am looking at adding the drop down menu.

Menu.css is in the \themes\olivesunset\css folder
Menu.ss is in the \themes\olivesunset\templates\includes folder
Page.ss is in the \themes\olivesunset\templates folder which has the content

<div id="Navigation">
<% include Navigation %>
<% include Menu %>
</div>

Have added the code <% include Menu %>

The normal Horizontal NAV menu is displayed but the drop down does not appear. What am I missing?

See: http://www.sunnynook.school.nz/

Can you help please?

Thanks

Mauricio