I was recently helped by another SS user community.
I changed the standard Olivesunet theme to incroporate the drop down menus and they work really well on both FF & IE.
See the implementation at: http://www.sunnynook.school.nz/
Here is what you need to do.
The CSS is from cssmenus.co.uk so if you need more information on how the CSS works check that out. Remember to back up your files before changing them in case something goes bad.
Ok first open the Navigation.ss file which is in themes/themename/templates/includes/
It currently looks like the following (hopefully)
-----------------------------------------------------------------------------
<ul>
<% control Menu(1) %>
<li><a href="$Link" title="Go to the $Title.XML page" class="$LinkingMode"><span>$MenuTitle</span></a></li>
<% end_control %>
</ul>
-----------------------------------------------------------------------------
You want to change it to be this:
-----------------------------------------------------------------------------Copy below line
<!-- [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]-->
-----------------------------------------------------------------------------Stop Copying
This should allow for 2 layers deep.
Next step is to add the CSS you can either add as a new file or i just recommend adding it to the end of the layout.css file located in theme/themename/CSS/
Add the following. At the very end of the file.
-----------------------------------------------------------------------------Copy below line
/* Drop Down Menu 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:10px; position:relative; z-index:500;}
#menu1 li {float:left; margin-right:1px;}
#menu1 li a {display:block; float:left; height:10px; line-height:30px; color:#000; text-decoration:none; font-weight:normal; padding:0 30px 0 25px;}
#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:#8d8c5b;}
#menu1 li:hover > a.sub {color:#fff; background-color:#8d8c5b;}
#menu1 li.current a {color:#fff; background:#8d8c5b;}
#menu1 li a.sub {background: url(../images/down-arrow.gif) no-repeat right center;}
#menu1 li.current a.sub {color:#fff; background:#8d8c5b 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:#8d8c5b; 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:#8d8c5b; color:#fff;}
#menu1 :hover ul :hover a.fly {background-color:#8d8c5b; 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:#8d8c5b; color:#fff;}
#menu1 :hover ul :hover ul li.currentfly a,
#menu1 :hover ul :hover ul li.currentfly a:hover {background:#8d8c5b; color:#fff;}
-----------------------------------------------------------------------------Stop Copying
I also had to change the following in the #Navigation section:
/*** Main Nav ***/
#Navigation {
width: 710px;
height: 3em;
margin: 0;
/* overflow: hidden; */
overflow: visible;
background: #7e7d49 url(../images/o_menu_bg.png) no-repeat center bottom;
}
Note: see that the code "overflow: hidden" has been commented out and repalce with "overflow: visible" which was needed to display the dropdown menu.
When you have uploaded the changes, you need to flush the template by adding ?flush=1 to the end of your site address, this will hopefully display your menus.
Please note that the images "down-arrow.gif" & "right-arrow.gif" though they are referenced in the CSS above are not included in my implementation as they appeared on the menu items whether there was a sub menu or not. I prefer these arrows only to appear if there is a sub menu otherwise, it should n ot. So I left the code in here but just not uplaoded the images. The images must be uploaded to the images folder of the them you are working with.
I hope this helps you. I definitely got up and running with the information I was provded.
All the best.
Mauricio