...

View Full Version : Help - CSS Submenu positioning



OptionExplicit
09-03-2010, 08:34 AM
Hi guys, hope someone can help me real quick.

I can't position the submenu of the website I'm building at the moment. The submenu should appear when the parent menu is hovered on. But the submenu list is appearing at the very left of the inline-block parent menus. (see doingpoker.org and highlight Rules)

Here's my CSS for the menu:


/* MENU CSS */
#header #topright ul.menu {
}
#header #topright ul.menu li {
display: inline; /* KEEPS PAGE MENU HORIZONTAL */
/*position:relative;*/
}
#header #topright ul.menu li a {
display: inline-block;
color: #000;
font-size: 13px;
font-family: Verdana;
padding-top: 6px;
padding-bottom: 10px;
padding-left: 18px;
padding-right: 18px;
}
#header #topright ul.menu li:hover {
}


/* CHILD PAGES */
#header #topright ul.menu li ul.children {
background-color: #000;
width: 165px;
display: none;
position: absolute;
}
#header #topright ul.menu li:hover ul.children {
display: block;
}
#header #topright ul.menu li ul.children li {
}
#header #topright ul.menu li ul.children li a {
width: 100%;
border: 1px solid #505050;
}
#header #topright ul.menu li ul.children li:hover a {
background-color: #333333;
}

/* END CHILD PAGES CSS */

/* HYBRID SETTINGS */
#header #topright ul.menu a:hover,
#header #topright ul.menu li ul.children a {
background-color: #000;
color: #FFF;
text-decoration: none;
}
/* END MENU CSS */

See the commented position: relative? Already tried that, doesn't work.

OptionExplicit
09-03-2010, 09:06 AM
Nevermind, got it fixed. Must put "left: 0" to the child UL. Then apply "position: relative" to the parent UL's LI.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum