CSS Nested Menu? Help!

Faithless

Faithless

Faithless

Permabanned
Joined
24 Nov 2006
Posts
560
Hi,

I have a simple navigation menu using CSS set to the left of the page with a rollover colour change, nothing too fancy.

What I'd like to know is how to go about setting up a child navigation.

Assume I have Navigation such as:-

Home
News
Products
Contact

When Products is either rolled over or clicked, I want a child navigation to appear nested beneath it.

Does that make sense and can anyone point me in the right direction?

Thanks
 
Hi,

thanks for the replies.

This is the code i've come up with and it does what I want, at least in IE7.

Code: 
#navlist {
	padding: 0;
	margin: 0;
	}


#navlist li {
	position:relative;
	border-bottom: 1px solid #7BA7B9;
	list-style: none; /* no bullets */
	font-size: 13px;
	text-align: right;
	}

#navlist li a {	
	display:block;
	font-weight: bold;
	padding: 0.25em 1em 0.25em 0;
	border-right: 1em solid #7BA7B9;
	text-decoration: none;
	}

#navlist li a:link { color: #696967;}
#navlist li a:visited { color: #696967;}
#navlist li a:hover { color: #FFFFFF; border-color: #F2C462; background-color: #F2C462;}
#navlist li a:active { color: #FFFFFF; border-color: #F2C462; background-color: #F2C462;}

li.folder  {  } 		
		
li.folder ul {
	{
	position:absolute;
	left:520px; 
	top:3px;
		}		
		
li.folder>ul { left:150px; } 

a {
		padding:2px;
		border:1px solid white;
		text-decoration:none;
		color:gray;
		font-weight:bold;
		width:100%; 
	}
		li>a { width:auto; } 

	li a.submenu {
		background:url("images/sub.gif") right no-repeat;
	}



/* hovers with specificity */
	
li.folder:hover { z-index:50; }		
		
ul ul, li:hover ul ul {display:none;}

li:hover ul

It doesnt work in IE6. Can anyone help?
 
Hmm, I quite like the look of this sort of menu :)

I might have to knick it for my site ;)

Have you sorted the IE6 problem yet? I'll be doing most of my testing in IE6/Firefox...

Cheers,

SW.
 
You must log in or register to reply here.
Back
Top Bottom