Submenus of menu doesnt work in Chrome (something with position: absolute)

Question

here is the menu:

    Home
LeaguesOverall
Season
Statistics
Playoffs
Countries
League replays
League rules
Replay comments
Replay highlights
Point analyzer
CommunityClan members
League members
Administrators
All users
NNN forum
CWT
IRC channel
All rates
My panel
HostingWormnet
Direct connect
CompetitionsOne evening tournament
2on2
NNN cup
Best Move Contests
Challenges
Calendar
ArchiveRanking history
Tourney history
Clan history
Retired members
Museum
Knowledge baseNNN clan goals
Training missions
Strategy
Weapons
UtilsLinks
Files


#nav {
    display:table;
    margin: 0;
    padding: 0;
}
#nav a
{
    display: block;
    width: 100%;
    text-align: center;
}
#nav > li {
    list-style: none;
    position: relative;
    display: table-cell;
    width: 1%;
}
#nav ul li {
    width: 100%;
    display: block;
    position: relative;
    white-space: nowrap;
}

#nav ul {
    /*display:none;
    margin: 0;
    padding: 0;*/
    display: none;
    position: absolute;
    width: 100%;
    left: 0px;
}
#nav li:hover > ul {
    display:block;
    position:absolute;
    z-index:1000;
}

#nav > li ul li ul {
    left: 100%;
    top: -2px;
    white-space: nowrap;
}

#nav li, li a {
    color:#000;
    text-decoration:none;
}

#nav li[level="1"]
{
    background-color: #F1F1D9;
    color: black;
    font-family: 'Arial';
    font-size: 14px;
}
#nav li[level="1"] :hover
{
    background-color: #12142E;
    color: #FFFF00;
}
#nav ul li[level="2"]
{
    background-color: #F1F2EA;
    color: black;
    font-family: 'Arial';
    font-size: 14px;
}
#nav ul li[level="2"] :hover
{
    background-color: #12142E;
    color: #FFFF00;
}

.menuIconsP
{
    display:table;
    width:100%;
}

.menuIcons
{
    display: table-cell;
    vertical-align: middle;
    height: 38px;
}
.menuIcons img
{
    width: 100%;
    max-width: 25px;
    max-height: 25px;
}
.menuIcons2
{
    display: table-cell;
    vertical-align: middle;
    height: 38px;
    padding: 0 6px 0 6px;
}
.menuIcons2 img { }
.menuWrapper
{
    display: table;
    margin: 0 auto;
}

.menuText
{
    padding-left: 10px;
    display: table-cell;
    vertical-align: middle;
}
.menuText2
{
    padding-left: 10px;
    display: table-cell;
    vertical-align: middle;
}

it works well with Firefox. But with Chrome, the sub menus arent expanded to 100%. How to workaround this?

CherryFlavourPez · Accepted Answer

Chrome is actually getting this one right: there is a long-standing Firefox bug when you combine position: relative and display: table-cell (it won't work, so the child menu will be positioned relative to whatever parent is the positioning context).

To achieve what Firefox is actually doing cross-browser, just remove the position: relative from #nav > li.

Your sub-menu's position will then be whatever its natural position in the document is, unless you specify otherwise. To make this less fragile (I can foresee IE issues), add a wrapper to the ul#nav, and give that position: relative;. You can then position the sub-nav explicitly relative to that parent. See this forked version of your fiddle, which should work pretty much everywhere. The most important updates to the CSS:

#nav-wrapper {position: relative;}

#nav ul {
   display: none;
   margin: 0;
   padding: 0;
   position: absolute;
   top: 100%;
   left: 0;
   right: 0;
   z-index: 1000;
}

So, for the sub-menu I'm explicitly setting top: 100%, then left: 0; right: 0 rather than setting the width. That way (if you want) you can add padding/borders without affecting the layout.

I've also tidied up your CSS slightly. When setting something to display: block, don't also set the width to 100%. It's redundant, as a block-level item will fill the available horizontal space. Leaving out the width again mean you can add padding etc. without screwing up your layout.

Submenus of menu doesnt work in Chrome (something with position: absolute)

Answers (2)

Related Questions