CSS menu items not showing in chrome - css

Question

For some reason, this works in firefox and iexplore but not chrome.
It is supposed to hide the submenu until the mouse rolls over it - in chrome the mouseover clearly works as the colour changes etc, but the menu does not pop out!
any help you can offer would be amazing!
thanks!!
#menu, #menu ul
{
margin:0px;
padding:0px;
list-style:none;
list-style-position:outside;
position:relative;
line-height:2em; /* this would mean the element is double the height of the font */
}
/* set up colours, borders and element padding */
#menu a:link, #menu a:active, #menu a:visited
{
display:block;
padding:0px 5px; /* shorthand padding - this means top and bottom padding is 0, left and right are 5px */
color: #000000; /* link text colour */
text-decoration:none;
background-color:#F90; /* specifies background colour of links */
font-weight:bold;
color:#FFC;
/* border stuff */
border:1px solid #F90; /* shorthand, border is 1px wide, solid and coloured */
}
/* set up hover colour for links */
#menu a:hover
{
background-color:#FC6;
color:#900;
border:1px solid #F60;
}
/* position menu elements horizontally */
#menu li
{
width:7em;
position:relative;
}
/* position and hide nested lists (width required to make menu display vertically) and "top" value needs same measurement as defined for #menu */
#menu ul
{
position:absolute;
width:7em;
left:7em; /* same value as width - no bigger otherwise gap will appear and menu will not work */
top:0em; /* line up with parent list item */
display:none;
}
/* set width of links to 12em */
#menu li ul a
{
width:7em;
float:left;
}
/* display information for sub-menus */
#menu ul ul
{
top:auto;
}
#menu li ul ul
{
left:7em;
margin: 0px 0px 0px 10px; /*shorthand margin command */
}
/* display when rolled over - also number of sub-menus to display - if wanted to use more submenus, would need more UL's (ie ul ul ul instead of ul) */
#menu li:hover ul ul
{
display:none;
}
#menu li:hover ul, #menu li li:hover ul
{
display:block;
}

Answer 1

I came across this searching for a solution to a similar problem. OP's site seems to work in Chrome now, but I found that the problem was in the way Chrome handles certain elements. There was a 1px gap between the main menu item and the submenu item, and hitting that gap with the cursor would hide the submenu. The solution was to set margin-top on the submenu to -1px to remove that gap. In OP's case, it appears that gap would have been to the left of the submenu rather than the top.
Note: Mine differs from OP in that I have used <div> rather than <ul> and <li>, but the principle's the same.
site: WeirdCalculator.com
From CSS stylesheet:
.menuitem {
display: inline;
}
.menuitem:hover .show {
margin-top: -1px;
}

Answer 2

#lipelip is almost right.
You have to remove position: relative from just the inner <li> tags - not the outer ones.
If that's difficult to understand, you could just add this to your CSS instead:
#menu li ul li
{
position:static;
}
It fixes the problem by setting the correct position property on the inner <li> tags only.

Answer 3

Remove the position:relative; you have on the #menu li {}
Not sure why it's not working in Chrome but I don't think you need it anyway.

Answer 4

Also please check float property for this issue. There is a float:none in my CSS, I removed the float and it resolved my issue of text whch was not appearing on popup menus in Chrome.