Hi, I’m having trouble adding a sub menu to my products tab
which I need three of on my navigation. I am sort of new to web design and was
wondering if someone could take a look at my index page and maybe help me out.

 

Many thank

stuart

index.html

It's often better to use a menu that has been tested and edit to your requirements as coding your own may not work in all browsers. Have a look at menus here:

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

which are pure CSS, no javascript.

 

Choose a menu and look at the source code, copying from the head section style tag for the CSS, usually where it has styles for .menu or .nav, and copy the relevant part of the html markup, then edit carefully.

Do not nest tags (div inside div inside div)

 

<ul>
	<li class="current_page_item"><a href="index.html">Home</a></li>
	<li>
		<a href="products.html">Products</a>
		<ul>
			<li><a href="products.html">Prod 1</a></li>
			<li><a href="products.html">Prod 2</a></li>
			<li><a href="products.html">Prod 3</a></li>
		</ul>
	</li>
	<li><a href="accessories.html">Accessories</a></li>
	<li><a href="software.html">Software</a></li>
	<li><a href="support.html">Support</a></li>
	<li><a href="contact.html">Contact Us</a></li>
</ul>

Then use CSS to adjust positions, change visuals and create hover effects

Edited April 12, 201313 yr by Nullified

I've spent a lot of time playing around with this. I found this tutorial to be concise and helpful http://www.bappi-d-great.com/css-2/create-multi-level-drop-down-menu-in-css. The demo is at the bottom in little red writing (should be on the page to make it clearer, but it is there).

This tutorial is awesome, the guy explains it so well.

http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu This one's good too.

It's often better to use a menu that has been tested and edit to your requirements as coding your own may not work in all browsers. Have a look at menus here:

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

which are pure CSS, no javascript.

 

Choose a menu and look at the source code, copying from the head section style tag for the CSS, usually where it has styles for .menu or .nav, and copy the relevant part of the html markup, then edit carefully.

Stu did you manage to get any of them to work? I'm trying to navigate around the site but it's a minefield. Managed to find a dropdown one but need to customize it further with lists inside lists and think it would be too much for me.

Did you manage to do it?