I have a vertical menu, when you hover on 1 item (if the item has any sub items) it will display a drop-down menu. I wanted to add a 3rd tier to the menu where as, if you hover over any item in the drop down (if that item has any sub items) it will then display the 3rd tier menu to the side. I currently have the items in place and the css shows but i can’t get the CSS to behave like I want. Both dropdown and 3rd Tier menus display when the vertical menu item is hovered over. I have gotten so close in my code, but can not get past this point. Please help.
Here is the CSS - I’ll post the actual HTML in the next post.
/* Main menu settings */
#centeredmenu
{
clear:both;
float:left;
margin:0;
padding:0;
border-bottom:1px solid #c1c1c1; /* logo blue line below menu #c1c1c1 */
width:100%;
font:100%;
font-family:Verdana, Geneva, sans-serif; /* Menu font */
z-index:2; /* dropdown menus appear above the page content below */
position:relative;
text-align:center;
}
/* Top menu items */
#centeredmenu ul
{
margin:0;
padding:0;
list-style:none;
float:right;
position:relative;
right:50%;
}
#centeredmenu ul li
{
margin:0 0 0 1px;
padding:0;
float:left;
position:relative;
left:50%;
top:1px;
text-align:left;
}
#centeredmenu ul li a
{
display:block;
margin:0;
padding:1em 1em .5em;
font-size:1.1em;
line-height:1em;
background:#white;
text-decoration:none;
color:#444;
font-weight:bold;
border-bottom:0px solid #000; /* Normal state Top menu underline colour */
}
#centeredmenu ul li.active a {
color:#000; /* Normal state Top menu items font colour */
background:transparent; /* Normal state Top menu items background colour (logo blue)#1a7bb7 */
}
#centeredmenu ul li a:hover
{
background:white; /* Top menu items background colour */
color:#000;
border-bottom:0px solid #1a7bb7;
}
#centeredmenu ul li:hover a,
#centeredmenu ul li.hover a
{ /* This line is required for IE 6 and below */
background:transparent; /* Hovered Top menu items background colour */
color:#88bbd4; /* Hovered Top menu text background colour */
border-bottom:0px solid #1a7bb7; /* Hovered state Top menu underline colour */
}
/* Submenu items */
#centeredmenu ul ul
{
display:none; /* Sub menus are hiden by default */
position:absolute;
top:2.6em; /* distance between main menu and sub menu */
left:0;
right:auto; /*resets the right:50% on the parent ul */
width:10em; /* width of the drop-down menus */
}
#centeredmenu ul ul li
{
left:auto; /*resets the left:50% on the parent li */
margin:0; /* Reset the 1px margin from the top menu */
clear:left;
width:100%;
}
#centeredmenu ul ul li a,
#centeredmenu ul li.active li a,
#centeredmenu ul li:hover ul li a,
#centeredmenu ul li.hover ul li a
{ /* This line is required for IE 6 and below */
font-size:1em;
font-weight:normal; /* resets the bold set for the top level menu items */
background:#fff; /* sub-menu background color */
color:#444;
line-height:1.5em; /* overwrite line-height value from top menu */
border-bottom:1px solid #88bbd4; /* sub menu item horizontal lines */
}
#centeredmenu ul ul li a:hover,
#centeredmenu ul li.active ul li a:hover,
#centeredmenu ul li:hover ul li a:hover,
#centeredmenu ul li.hover ul li a:hover
{ /* This line is required for IE 6 and below */
background:#88bbd4; /* Hovered Sub menu items background colour */
color:#fff;
}
/* 3rd Tier Submenu items */
#centeredmenu ul ul ul
{
display:none; /* Sub menus are hiden by default */
position:absolute;
top:0; /* distance between main menu and sub menu */
left:120px;
right:auto; /*resets the right:50% on the parent ul */
width:10em; /* width of the drop-down menus */
}
#centeredmenu ul ul ul li
{
left:auto; /*resets the left:50% on the parent li */
margin:0; /* Reset the 1px margin from the top menu */
clear:left;
width:100%;
}
#centeredmenu ul ul ul li a,
#centeredmenu ul ul li.active ul li a,
#centeredmenu ul ul li:hover ul li a,
#centeredmenu ul ul li.hover ul li a
{ /* This line is required for IE 6 and below */
font-size:1em;
font-weight:normal; /* resets the bold set for the top level menu items */
background:#fff; /* sub-menu background color */
color:#444;
line-height:1.5em; /* overwrite line-height value from top menu */
border-bottom:1px solid #88bbd4; /* sub menu item horizontal lines */
}
#centeredmenu ul ul ul li a:hover,
#centeredmenu ul ul li.active ul li a:hover,
#centeredmenu ul ul li:hover ul li a:hover,
#centeredmenu ul ul li.hover ul li a:hover
{ /* This line is required for IE 6 and below */
background:#88bbd4; /* Hovered Sub menu items background colour */
color:#fff;
}
/* Flip the last submenu so it stays within the page */
#centeredmenu ul ul.last
{
left:auto; /* reset left:0; value */
right:0; /* Set right value instead */
}
/* Make the sub menus appear on hover */
#centeredmenu ul li:hover ul,
#centeredmenu ul ul li:hover ul,
#centeredmenu ul li.hover ul
{ /* This line is required for IE 6 and below */
display:block; /* Show the sub menus */
}