CSS dropdown menu help?

**7724** · Jun 14, 2005 08:21

Hi,

I've put together a nifty little dropdown menu for my site with what I already know about CSS and some online tutorials, which i'm very pleased with:

HTML Code:

<html>
<head>
<title>CSS Menu Test</title>
</head>
<style>
body {font-family: Verdana, Helvetica, Arial, sans-serif;
background-color: #FFFFFF;
font-size: 11px;}

#navigator {background-color: #FFFFFF;
margin-top: 100px;
width: auto;
margin-left: 43.5%;
margin-right: 43.5%;
text-align: left;
padding: 8px;}

.navigationbutton {font-weight: bold;
text-align: center;
margin-bottom: 3px;
margin-top: 3px;}

.navigationbutton a {padding: 4px;
text-decoration: none;
display: block;
color: #ffffff;
background-color: #000099;
border-top: 2px #cce3ff solid;
border-left: 2px #cce3ff solid;
border-bottom: 2px #31557f solid;
border-right: 2px #31557f solid;}

.sectionbutton {font-weight: bold;
text-align: center;
margin-bottom: 3px;
margin-top: 3px;}

.sectionbutton a {padding: 4px;
background-color: #0066ff;
font-weight: bold;
text-decoration: none;
color: #ffffff;
border-top: 2px #ffe5c3 solid;
border-left: 2px #ffe5c3 solid;
border-bottom: 2px #7f6645 solid;
border-right: 2px #7f6645 solid;
display: block;}

.mainbutton {font-weight: bold;
text-align: center;
margin-bottom: 3px;
margin-top: 3px;}

.mainbutton a {padding: 4px;
background-color: #cccccc;
font-weight: bold;
text-decoration: none;
color: #4f5942;
border-top: 2px #edf8de solid;
border-left: 2px #edf8de solid;
border-bottom: 2px #727f5e solid;
border-right: 2px #727f5e solid;
display: block;}

.mainbutton a:hover {border-top: 2px #727f5e solid;
border-left: 2px #727f5e solid;
border-bottom: 2px #727f5e solid;
border-right: 2px #727f5e solid;
background-color: #eeeeee;}

</style>
<body bgcolor="#FFFFFF">
<div id="navigator"> 
  <p class="navigationbutton"><a href="../index.html">Navigation</a></p>
  <p class="sectionbutton"><a href="../../index.html">Sections</a></p>
  <p class="mainbutton"><a href="../../../../index.html">Latest News</a></p>
  <p class="mainbutton"><a href="../../../../../index.html">Latest Business</a></p>
  <p class="mainbutton"><a href="../../../../../../link.html">E-Commerce</a> 
  <p class="mainbutton"><a href="../../../../../../link.html">Cinema</a> 
  <p class="mainbutton"><a href="../../../../../../link.html">Leisure</a> 
  <p class="mainbutton"><a href="../../../../../../link.html">Eating Out</a> 
  <p class="mainbutton"><a href="../../../../../../link.html">Contact Us</a> 
  <p class="mainbutton"><a href="../../../../../../link.html">Message Board</a> 
  <p class="mainbutton"><a href="../../../../../../link.html">Motoring</a> 
  <p class="mainbutton"><a href="../../../../../../link.html">Advertiser</a> 
  <p class="mainbutton"><a href="../../../../../../link.html">Observer</a> 
  <p class="mainbutton"><a href="../../../../../../link.html">Public Notices</a> 
  <p class="mainbutton"><a href="../../../../../../link.html">Property</a> 
  <p class="mainbutton"><a href="../../../../../../link.html">Job Search</a> 
  <p class="mainbutton"><a href="../../../../../../link.html">Local Links</a> 
  <p class="mainbutton"><a href="../../../../../../link.html">Motor Search</a> 
</div>
</body>
</html>

Now I do like this, but was wondering if someone could point me in the way of some online tutorials.

What I want to to is create 'submenu' kind of like this one when the buttons are clicked on:

http://www.dynamicdrive.com/dynamici...witchmenu2.htm

Which is done in Javascript, but I want to use CSS. I know it can be done as this site does it with css:

http://www.aylesburyunited.co.uk/

Does it, so can anyone let me know of a good tutorial/thread on this forum or just advise how I can go about doing this?

Many Thanks

Chris

**deronsizemore** · Jun 14, 2005 10:16

You should really use lists for your menus, it makes things alot easier. Also I think what you're talking about something like the "suckerfish" drowdowns. Just google "suckerfish drowdown menu" and you should find the link or you can do a search here at sitepoint, its been discussed before.

If you can't find anything let me know. When I get off work I'll help you out more on my computer at home. I don't have the link here at work.