Please have a look here

is there anyway to adjust this menu so the "services" tab has a couple of extra options drop down?

Also the tab would have to have a small down arrow next to it so im guessing I need to insert a background image somewhere to the css for that line?

I really didn't want to have to start the menu again from scratch if I could help it!

Normally the method of building a dropdown begins with nesting an unordered list inside of another unordered list. Since your menu is already a <ul>, you can build another <ul><li></li></ul> inside of the services <li>, right before or after the <a>Services</a>. Then, by targeting this list with rules like ul ul, or ul ul li, you can give it seperate styles without even needing to name it something differently. I recommend Son-of-Suckerfish style dropdowns.

OK.....

Heres the HTML

<div id="modernbricksmenu2">
          <ul>
            <li id="current" style="margin-left: 1px"><a href="index.htm" title="About Us">About Us</a></li>
            <li><a href="business-consultancy-services.htm" title="Services">Services</a></li>
            <li><a href="customer-testimonials.htm" title="Testimonials">Testimonials</a></li>
            <li><a href="business-consultancy-case-studies.htm" title="Case Studies">Case Studies</a></li>
            <li><a href="contact.htm" title="Contact">Contact</a></li>
          </ul>
          <br />
          <br />
        </div>

CSS is

#modernbricksmenu2{
padding: 0;
width: 100%;
border-top: 4px solid #BC9B6A; /*Brown color theme*/ 
background: transparent;
voice-family: "\"}\"";
voice-family: inherit;
}

#modernbricksmenu2 ul{
margin:0;
margin-left: 0px; /*margin between first menu item and left browser edge*/
padding: 0;
list-style: none;
}

#modernbricksmenu2 li{
display: inline;
margin: 0 2px 0 0;
padding: 0;
text-transform:uppercase;
}

#modernbricksmenu2 a{
float: left;
display: block;
font: bold 11px Arial;
color: white;
text-decoration: none;
margin: 0 0px 0 0; /*Margin between each menu item*/
padding: 5px 10px;
background-color: black; /*Brown color theme*/ 
border-top: 1px gray;
}

#modernbricksmenu2 a:hover{
background-color: #BC9B6A; /*Brown color theme*/ 
color: white;
}

#modernbricksmenu2 #current a{ /*currently selected tab*/
background-color: #BC9B6A; /*Brown color theme*/ 
color: white;
border-color: #BC9B6A; /*Brown color theme*/ 
}

Can any one help with this?? I just need 3 extra links to appear when hovering over "services"

Right, the <ul><li></li></ul> makes sense but when you say target with rules, you mean for the styling of the dropdown?

Hmmm... it just adds the extra links to the rows...?

This might help
http://search.yahoo.com/search?ei=UT...%40&fr2=sp-top

Thanks Joder,

I've got a step further but still running into problems.

Look Here

The extra links appear when hovering over "services" but at the top and not dropping down!

Your programming a hover menu in which the submenu is normally below or beside the parent. When your mouse moves outside the menu it disappears. To open a submenu in a different part of the page, it looks to me you'll have to try something else.

No sorry I explained that wrong I dont want it to appear at the top but it is!

I want the list to appear below the "services" tab

Cool stuff. Where did you learn all of this?

You have it set to display at the top left here

#modernbricksmenu2 li ul {
  display: none;
  position: absolute; 
  top: 1em;
  left: 0;
}

ok, so what does it need to be set at?

GRRRRRR! This is driving me nuts! I need to go live with the site in an hour!

Got the menu to NEARLY work, now they appear as a new row instead of straightdown! Link here

This is the one I use
http://www.dynamicdrive.com/dynamici...rome/index.htm

Don't know why you stick with position:absolute. Anyway, you might try the above one. For me it's not easy trying to sift through all the code trying to find a fix.

Thanks Joder, I'm calling it a day now. I'll have a look in the morning.
If anyone comes up with a solution in the meantime that would be great.

Darren

@ Wayfarer07
@ Joder

Thanks for your help - TP added.

Final Menu is here

One last question...

On IE7 the last dropdown link seems a bit twitchy to click on.
There seems to be a gap between the 2 but the life of me I can't find out how to close it!

Cheers