I am at the end of my knowledge (which by the way is limited as you can see
)I try to create a vertical menu which show its sub menu through hovering over the parent link. Right now the sub menu is only shown if I click on the parent link and so on.
I hope someone can help me. My menu code looks like this for now:
Code: Select all
/******************** MENU *********************/
#menu_vert {
margin: 0;
padding: 0;
height: 350px;
}
#menu_vert ul {
/* remove any bullets */
list-style: none;
/* margin/padding set in li */
margin: 0px;
padding: 0px;
}
#menu_vert ul ul {
margin: 0;
/* padding right sets second level li in on right from first li */
padding: 0px 0px 0px 0px;
/* replaces bottom of li.menuactive menuparent, looks like li below it, set in 5px more, is sitting on top of it */
}
#menu_vert li {
/* remove any bullets */
list-style: none;
/* negative bottom margin pulls them together, images look like one border between */
margin: 0px 0px 1px;
/* bottom padding pushes "a" up enough to show our image */
padding: 0px 0px 0px 0px;
/* you can set your own image here */
background-color:#9BC26D;
}
#menu_vert li.currentpage {
padding: 0;
color: #fff;
font-size: 11px;
font-family:verdana;
}
#menu_vert li.menuactive {
margin: 0;
padding: 0px;
/* replaced by image in ul ul */
background: none;
}
#menu_vert li.menuactive ul {
margin: 0;
}
#menu_vert li.activeparent {
margin: 0;
padding: 0px;
}
/* fix stupid IE6 bug with display:block; */
* html #menu_vert li {
height: 1%;
}
* html #menu_vert li a {
height: 1%;
}
* html #menu_vert li hr {
height: 1%;
}
/** end fix **/
/* first level links */
div#menu_vert a {
/* IE6 has problems with this, fixed above */
display: block;
/* some air for it */
padding: 0.5em 0.3em 0.5em 1.2em;
/* this will be link color for all levels */
color: #fff;
font-size: 11px;
font-family:verdana;
/* Fixes IE7 whitespace bug */
min-height: 1em;
}
/* next level links, more padding and smaller font */
div#menu_vert ul ul a {
font-size: 11px;
background-color:#CDF49D;
color: #000000;
padding-left: 2.5em;
}
/* third level links, more padding */
div#menu_vert ul ul ul a {
padding: 0.5em 0.3em 0.3em 3em;
}
/* hover state for all links */
div#menu_vert a:hover {
background-color: transparent;
color: #fff;
}
div#menu_vert a.activeparent:hover {
color: #fff;
}
div#menu_vert ul ul li a:hover {
background-color: #E7F3D2;
color: #000000;
margin: 0;
}
/* active parent, that is the first level parent of a child page that is the current page */
div#menu_vert li.activeparent {
/* you can set your own image here */
/* white to contrast with background image */
color: #fff;
}
div#menu_vert li.activeparent a.activeparent {
/* you can set your own image here */
/* to contrast with background image */
color: #fff;
}
div#menu_vert li a.parent {
/* takes left padding out so span image has room on left */
padding-left: 1em;
}
div#menu_vert ul ul li a.parent {
/* increased padding on left offsets it from one above */
}
div#menu_vert li a.parent span {
display: block;
margin: 0;
/* adds left padding taken out of "a.parent" */
/* arrow on left for pages with children, points down, you can set your own image here */
}
div#menu_vert li a.parent:hover {
/* removes underline hover effect */
padding
text-decoration: none;
}
div#menu_vert li a.parent:hover span {
display: block;
margin: 0;
padding-left: 1.5em;
/* arrow on left for pages with children, points right for hover, you can set your own image here */
background: transparent url(uploads/images/pfeil.gif) no-repeat 2px center;
}
div#menu_vert li a.menuactive.menuparent {
/* sets it in a little more than a.parent */
padding: 0em 0em 0.1em 0em;
}
div#menu_vert ul ul li a.menuactive.menuparent {
/* sets it in a little more on next level */
}
div#menu_vert li a.menuactive.menuparent span {
display: block;
margin: 0;
/* to contrast with non active pages */
padding: 0.5em 0.3em 0.5em 2.5em;
/* arrow on left for active pages with children, points right, you can set your own image here */
background: transparent url(uploads/images/pfeil.gif) no-repeat 13px center;
background-color: #9BC26D;
}
div#menu_vert li a.menuactive.menuparent:hover {
text-decoration: none;
color: #fff;
}
div#menu_vert ul ul li a.activeparent {
color: #fff;
}
/* current page on third level, more padding */
div#menu_vert ul ul ul p{
padding: 0.5em 0.3em 0.5em 1.2em;
}
/* current pages in the default Menu Manager template are unclickable. This is for current page on first level */
div#menu_vert ul p{
display: block;
/* some air for it */
padding: 4px 0.3em 4px 1.2em;
/* this will be link color for all levels */
color: #fff;
/* instead of the normal font size for <h3> */
/* as <h3> normally has some margin by default */
margin: 0;
}
/* next level current pages, more padding, smaller font and no background color or bottom border */
div#menu_vert ul ul p{
padding: 3px 0.5em 4px 2.5em;
/* you can set your own image here, same as "a" */
color: #000000;
background-color: #E7F3D2;
}
center;div#menu_vert li a.parent span {
display: block;
margin: 0;
/* adds left padding taken out of "a.parent" */
padding-left: 1.5em;
/* arrow on left for pages with children, points down, you can set your own image here */
background-color: #E7F3D2;
}
/* BIG NOTE: I didn't do anything to these, never tested */
/* section header */
div#menu_vert li.sectionheader {
border-right: none;
font-size: 130%;
font-weight: bold;
padding: 1.5em 0 0.8em 0;
background-color: #fff;
line-height: 1em;
margin: 0;
text-align: center;
}
/* separator */
div#menu_vert li.separator {
height: 1px !important;
margin-top: -1px;
margin-bottom: 0;
padding: 2px 0 2px 0;
background-color: #000;
overflow: hidden !important;
line-height: 1px !important;
font-size: 1px;
/* for ie */
}
div#menu_vert li.separator hr {
display: none;
/* this is for accessibility */
}
