I want to create a drop down menu that will link to 3 pages. I've created a jump down menu but i dont think it looked very good because i could not manipulate it in the way i want to and it was not in line with my other buttons. I've got a row of horizontal buttons and i want the third one along to be a drop-down menu, one that appears when you hover over the link.

 

Does anyone know of any other way to make a drop down menu or point me in the direction of any good tutorials.

You could use a CSS menu from cssplay (no javascript) from here:-

http://www.cssplay.co.uk/menus/

a typical dropdown menu would be

http://www.cssplay.co.uk/menus/basic_dd.html

but there are others.

You copy/paste the sthles from the head section style tag (usually a section with #menu or #nav) and copy/paste from the html body section.

 

In your case you will have to do some careful editing to delete the extra dropdown levels.

Thanks for the reply, firstly, i dont know what you mean by 'sthles'

 

I'm not that advanced in Web Design, can you explain like you're talking to a child.

 

Are you telling me to copy/paste from the 'view source' code?

Thanks for the reply, firstly, i dont know what you mean by 'sthles'

 

 

it's a typo for 'styles'

Sorry about the typo y and h are close together.

 

All cssplay menus work the same way. They have a top menu which is just the CSSplay menu - ignore that. The example menu is nearer the middle of the page. Choose one you like. Look at the cssplay source code and look for the example menu code, which usually had id or class for menu or nav. Copy/paste this into your web page. In the link I gave above it starts <div class="menu"> and ends </div> after the final </ul> tag.

 

Look at the cssplay source code head section style tag for the styles (spelt correctly this time) for all the styles beginning with menu or nav (usually there is a heading too like "This copyright notice must be untouched at all times".) Copy paste this into your head section style tag or preferably into a separate stylesheet.

 

Now you need to edit the example html markup, adding or removing menu bits, altering backgrounds, editing links, etc.

 

If you study the menus carefully you will identify sections of the html markup, so if you want to remove a section, it will be from say the opening <li> tag to the closing </li> tag or <ul> to </ul> for a larger section. It can be tricky so save after every edit and test then go back to the version that worked and edit again if there's a problem.

Edited December 24, 201015 yr by Wickham

Thanks alot, i'll give it a go now