Page 1 of 1
Submenu within a submenu
Posted: Sat Mar 06, 2010 7:45 pm
by 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?
Re: Submenu within a submenu
Posted: Sat Mar 06, 2010 8:21 pm
by Peciura
Comment height
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.
Re: Submenu within a submenu
Posted: Sat Mar 06, 2010 8:35 pm
by 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.
Re: Submenu within a submenu
Posted: Sat Mar 06, 2010 8:55 pm
by 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!
Re: Submenu within a submenu
Posted: Sat Mar 06, 2010 9:04 pm
by 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;}
Re: Submenu within a submenu
Posted: Sat Mar 06, 2010 11:09 pm
by 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
Re: Submenu within a submenu
Posted: Sun Mar 07, 2010 7:36 am
by 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;
}
Re: Submenu within a submenu
Posted: Sun Mar 07, 2010 9:31 pm
by stakey
Hi uniqu3,
That worked a charm! Cheers for your help!