CODEWITHSUNDEEP
cssfirefoxgoogle-chrome
AltheFuzz
AltheFuzz

Reputation: 109

CSS menu items not showing in chrome

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;
}

Upvotes: 2

Views: 4286

Answers (4)

tiger
tiger

Reputation: 1

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.

Upvotes: 0

Austin
Austin

Reputation: 21

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;
}

Upvotes: 2

thirtydot
thirtydot

Reputation: 228182

@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.

Upvotes: 0

lipelip
lipelip

Reputation: 171

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.

Upvotes: 0

Related Questions