| theredone |
Nov 21, 2010 09:24 PM |
Menu - parent, child, grandchild cascade change in rmenu
I am using the Atahualpa 3.4.9 version. http://tammytibbles.com/test/ffschool/
I have a page menu header with parent, child, grandchild elements. Such as:
Parent
Child A
Grandchild A1
Grandchild A2
Grandchild A3
Child B
Grandchild B1
Grandchild B2
Grandchild B3
Child C
Grandchild C1
Grandchild C2
Grandchild C3
Right now they cascade only vertically. This causes the Grandchild list for Child A to cover up the other Children (B and C) when the mouse hovers over the first item in the list.
I want it to look like the lists on the rmenu site http://webhost.bridgew.edu/etribou/layouts/rMenu/ All of the child items in these menus are visible and the grandchildren do not float over the child list.
I have looked at the CSS info provided on the rmenu site and have experimented with some changes but have not found the right thing to do. Is there an additional HTML code I need to add?
My current CSS Inserts area reads:
Code:
td#header {
padding-bottom: 15px;
}
/* removing the padding here and putting them on the sidebars instead. That way the middle column aligns nicely with the header when there are no sidebars */
td#middle {
padding: 0;
}
div.searchbox-form {
margin: 5px 0 15px 5px;
}
div#menu1 ul.rMenu {
background: transparent;
border: none;
}
div#imagecontainer {
border-top: solid 5px #333;
border-bottom: solid 5px #333;
}
div.widget ul li {
padding: 1px 5px 1px 12px !important;
background: url('<?php bloginfo('template_directory'); ?>/images/bullets/round-gray.gif') no-repeat 0 7px;
}
/* Adjustments for the menu bars, which in their default
state have 1px borders plus -1px margins to avoid 1+1=2px
borders between neighbor items. */
ul.rMenu-hor ul, ul.rMenu-hRight ul, ul.rMenu-hRight ul { margin-top: 0px; float: right;}
ul.rMenu-hor li { margin-bottom: 0px; margin-top: 0px; margin-left: 0px;}
ul.rMenu-hor { padding-left: 0px; }
ul.rMenu-ver li { margin-top: 0xp; }
div#menu1 ul.rMenu li a, div#menu2 ul.rMenu li a {
padding: 6px 10px;
}
/* Space between items of page menu bar */
div#menu1 ul.rMenu li {
margin-right: 5px;
}
/* Reset margin for 2nd+ level items */
div#menu1 ul.rMenu li li {
margin-right: 0;
}
/* round corners for page menu bar items */
div#menu1 ul.rMenu li, div#menu1 ul.rMenu li a {
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
/* reset 2nd+ level */
div#menu1 ul.rMenu li li, div#menu1 ul.rMenu li li a {
-webkit-border-top-left-radius: 0;
-webkit-border-top-right-radius: 0;
-moz-border-radius-topleft: 0;
-moz-border-radius-topright: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
I don't have any additional HTML or Java added.
Could you please provide guidance as to how to fix this? |
