I am trying to get a charity website up and running. I understand that you want people to learn for themselves but at the moment I need to get the site up and running and money coming in!

I would like to install a simple dropdown menu on the site. I have downloaded the code from cssmenu.co.uk and have tried implementing it with disasterous results. My menu content disappeared and the menu flew out and across the header to the left.

I am using the 'centered' option here: cssmenus.co.uk/dropdown.html

I have uploaded the images .. no problem as am changing them.
I am fine with the .css

<b>the navigation element itself I am not fine with</b>

-----------------------------------------------------------------------------------------------------

<ul id="menu">
<li><a href="index.html"><b>Home</b></a></li>
<li><a href="single.html"><b>Single Level</b></a></li>
<li class="current"><a class="sub" href="dropdown.html"><b>Dropdown</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="sub1">
<li><a class="fly" href="#url">Dropdown one<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="fly1">
<li><a href="#url">Dropdown 1.1</a></li>
<li><a href="#url">Dropdown 1.2</a></li>
<li><a href="#url">Dropdown 1.3</a></li>
<li><a href="#url">Dropdown 1.4</a></li>
<li><a href="#url">Dropdown 1.5</a></li>
<li><a href="#url">Dropdown 1.6</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="currentsub"><a class="fly" href="#url">Dropdown two<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="fly2">
<li><a href="#url">Dropdown 2.1</a></li>
<li><a href="#url">Dropdown 2.2</a></li>
<li class="currentfly"><a href="#url">Dropdown 2.3</a></li>
<li><a href="#url">Dropdown 2.4</a></li>
<li><a href="#url">Dropdown 2.5</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#url">Dropdown three</a></li>
<li><a href="#url">Dropdown four</a></li>
<li><a class="fly" href="#url">Dropdown five<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="fly3">
<li><a href="#url">Dropdown 5.1</a></li>
<li><a href="#url">Dropdown 2.2</a></li>
<li><a href="#url">Dropdown 3.3</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a class="sub" href="dropline.html"><b>Dropline</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="sub2">
<li><a href="#url">Dropline one</a></li>
<li><a href="#url">Dropline two</a></li>
<li><a href="#url">Dropline three</a></li>
<li><a href="#url">Dropline four</a></li>
<li><a href="#url">Dropline five</a></li>
<li><a href="#url">Dropline six</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a class="sub" href="flyout.html"><b>Flyout</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="sub3">
<li><a href="#url">Flyout one</a></li>
<li><a href="#url">Flyout two</a></li>
<li><a href="#url">Flyout three</a></li>
<li><a href="#url">Flyout four</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li id="support"><a href="support.html"><b>Support</b></a></li>
<li id="contact"><a href="contact.html"><b>Contact</b></a></li>
</ul>

---------------------------------------------------------------------------------------------------------------------

I just really don't know where to start with this, please help.

I believe you are looking for...

themes\YOURTHEMENAME\templates\Includes\Navigation.ss

not this shows the first level menu only, you'll need to combine it with templates\Includes\SideBar.ss that shows the second level of menu.

The key is the

<% control Menu(1) %>

or

<% control Menu(2) %>

made dropline like so:

<ul id="dropline">
 	<% control Menu(1) %>
	<% if Children %>
	<li class="$LinkingMode"><a href="$Link" title="Go to the $Title.XML page"><b>$MenuTitle.XML</b></a>
			<div>
			<ul>
			<% control Children %>
			<li class="current_sub"><a href="$Link" title="Go to the $Title.XML page" class="$LinkingMode"><span>$MenuTitle.XML</span></a></li>
			<% end_control %>
			</ul>
			</div>
	</li>
	<% else %>
	<li class="$LinkingMode"><a href="$Link" title="Go to the $Title.XML page"><b>$MenuTitle.XML</b></a><div>
			<ul></ul>
			</div></li>
	<% end_if %>
   	<% end_control %>
 </ul>

Thanks for the replies.

I have added the css (uploaded below) and added webdocs code (thank you) but the result is all the menu's showing at once (have attached a screenshot.

Any ideas what is causing this?

if your sitetree structure for dropdown is like so:

Page 1
-subpage 1
-subpage 2
--subpage for subpage 2
Page 2
Page 3

it works tryed in my server - http://www.e-sstonia.ee/demo/
themes/yourtheme/templates/Includes/Navigation.ss

<ul id="menu">
   <% control Menu(1) %>
   <% if Children %>
   <li class="$LinkingMode"><a class="sub" href="$Link" title="Go to the $Title.XML page"><b>$MenuTitle.XML</b></a>
         <ul>
         <% control Children %>
         <li>
				 <a <% if Children %>class="fly"<% else %><% end_if %> href="$Link" title="Go to the $Title.XML page" class="$LinkingMode"><span>$MenuTitle.XML</span></a>
				 <% if Children %>
				 <ul class="fly">
				 <% control Children %>
				 <li>
				 <a href="$Link" title="Go to the $Title.XML page" class="$LinkingMode"><span>$MenuTitle.XML</span></a>
				 </li>
				 <% end_control %>
				 </ul>
				 <% end_if %>
				 </li>
         <% end_control %>
         </ul>
   </li>
   <% else %>
   <li class="$LinkingMode"><a href="$Link" title="Go to the $Title.XML page"><b>$MenuTitle.XML</b></a><div>
         <ul></ul>
         </div></li>
   <% end_if %>
   <% end_control %>
</ul>

Thanks for that Webdoc. I now have a menu where it should be with dropdowns. The only problem now is that the dropdowns go behind the body/content area:

http://www.homelesshounds.org.uk/index.php/

In your Layout.css line 483 where is - ul#menu - remove overflow:hidden;
also find line: ul#menu :hover ul li a - and change the width for something biger then the drop down will be wider @ moment its 95px change like 125px then your Fostering Application menu will be in one line;

Thank you soo much Webdoc. I really appreciate your help.