Submenu within a submenu

[stakey]

Hi folks,

Appreciate any help here, I'm trying to build the following menu structure on this page:

http://www.presgirlsmaynooth.ie/parents.html

2.0 Parents Help
2.1 Parents Council

When users click on it I want it show a sub menu
2.0 - Parents Help
2.0.1 - Starting School
2.0.2 - Going to school
etc etc...
2.1 Parents Council

I'm including the side menu using the following code:

{menu template='cssmenu.tpl' start_level='2' collapse='1'}

As you can see it sort of works, but not sure how to get the submenu of the submenu to slot in there...

Really doing my head in, any pointers?

[Peciura]

Comment height

Code: Select all

.subnav ul li {
  height:46px;
}

Each menu item has a link (active item too) and all menu links have height  so there is no need to repeat it to list item.

[uniqu3]

Hi,

why are you using float if the menu is vertical? or are you trying to achieve a flyout menu?

Code: Select all

.subnav ul li

{

width:219px;

height:46px;

float:left;

text-align:left;

display:block;

background: url(http://www.presgirlsmaynooth.ie/images/cms/menu-bar-bg.jpg) left bottom no-repeat;

}

.subnav ul li a

{

width:204px;

height:46px;

float:left;

text-align:left;

display:block;

font: bold 12px/46px Verdana, Arial, Helvetica, sans-serif;

color: #333333;

padding-left:15px;

text-decoration:none;

}

Removing floats above fixes your footer and menu issue, but there would be few more issues to fix Commenting your code would help.

[stakey]

Ah ha! Getting there... much appreciated...

How do I apply a seperate style to the layer 3 menu items that are shown when you click on the 'parents help' link?

That's the part that's really got me lost

Thanks!

[uniqu3]

Glad it helped you.

Do you have 2 or 3 levels in your left menu?

Basicaly it would go so:

Code: Select all

 /*First level*/
.subnav ul li a:link, .subnav ul li a:visited
 {yourstyle;}

.subnav ul li a:hover, .subnav ul li a:active
 {yourstyle;}

/*Second level*/
.subnav ul li li a:link, .subnav ul li li a:visited 
{yourstyle;}

.subnav ul li li a:hover, .subnav ul li li a:active
 {yourstyle;}

[stakey]

Ah, I get what you're saying there, but if I do that will the styles of the first li not overwrite the second li?

Just tried it there, looks like it... :s

[uniqu3]

Try this:

Code: Select all

.subnav {
	width: 219px;
}
.subnav ul {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
}
.subnav ul li {
	width: 219px;
	line-height: 46px;
}
.subnav ul li a:link, .subnav ul li a:visited {
	width: 219px;
	text-align: left;
	line-height: 46px;
	display: block;
	font: bold 12px/46px Verdana, Arial, Helvetica, sans-serif;
	color: #333333;
	text-indent: 15px;
	text-decoration: none;
	background: url(http://www.presgirlsmaynooth.ie/images/cms/menu-bar-bg.jpg) left bottom no-repeat;
}
.subnav ul li a:hover, .subnav ul li a:active {
	color: #FFF;
	background: url(http://www.presgirlsmaynooth.ie/images/cms/inner-menu-hover-bg.jpg) left top repeat-x;
}
.subnav ul li.menuactive a {
	width: 219px;
	color: #FFF;
	background: url(http://www.presgirlsmaynooth.ie/images/cms/inner-menu-hover-bg.jpg) left top repeat-x;
}
.subnav ul li li {
	width: 219px;
        display:block;
	text-align: left;
	background: none;
}
.subnav ul li li a:link, .subnav ul li li a:visited {
	line-height: 18px;
        display:block;
	text-align: left;
	color: #b1268b;
	text-indent: 25px;
	text-decoration: none;
	background: none;
}
.subnav ul li li a:hover {
	text-decoration: underline;
}

[stakey]

Hi uniqu3,

That worked a charm! Cheers for your help!