No replies
Last seen: 13 years 17 weeks ago
Joined: 2009-03-06
Posts: 1
Points: 0


I want to make a top vertical menu, which will have multiple levels on rollover. I have attached the screen shot of how the menu would behave. menus should be displayed within the rectangle box. Also see how sub menus start from the top of the box and not relative to it's parent menu item.

menu items or sub menu items should not overflow the box and expands along horizontally.

i have tried with the following css (colors differ from the attached image), but not able to contain it in a rectangle space .Also submenu starts from its parent , I want it to start from the top of the box.

#menuContainer {
background-color: white;
width: 10em;
padding: 5px;

/* Link styles*/

#menuContainer a {
text-decoration: none;
color: #FFCC66;
font-weight: bold;
font-size: 10pt;
font-family: Verdana, Arial, sans-serif;

#menuContainer a:hover {
color: #993300;

/* Hide bullets in unordered list*/
#menuContainer ul {
list-style-type: none;
margin: 0;
padding: 0;

/* Set li styles*/

#menuContainer li {
background-color: #CC6600;
border: 1px solid #FF9933;
width: 10em;
/* this is to make the submenus position relative to this li */
position: relative;

/* Mouseover li style*/
#menuContainer li:hover {
border: 1px solid #CC6600;
background-color: #FF9933;

/*Initially hide second level (or higher) pop-up*/
#menuContainer ul ul {
position: absolute;
left: 10em;
top: 0;
visibility: hidden;
/*display: table-cell;
position: absolute;

/*Mouseover: display second level (or higher) pop-up*/
#menuContainer li:hover > ul {
visibility: visible;

looking forward for some help
thanks and regards,

topmenu.jpg18.94 KB