子菜單（一些與位置：絕對）

Question

這裏是菜單：

http://jsfiddle.net/79wpn/

<ul id="nav"><li level="1"><a href="/"><div class="menuIconsP"><div class="menuIcons"><div class="menuWrapper"><img src="/design/_menu/home.gif"><div class="menuText">Home</div></div></div></div></a></li><li level="1"><a href="/overall"><div class="menuIconsP"><div class="menuIcons"><div class="menuWrapper"><img src="/design/_menu/star.gif" ><div class="menuText">Leagues</div></div></div></div></a><ul><li level="2"><a href="/overall"><div class="menuIcons2"><div class="menuWrapper"><img src="/design/_menu/overall.gif" ><div class="menuText2">Overall</div></div></div></a></li><li level="2"><a href="/season"><div class="menuIcons2"><div class="menuWrapper"><img src="/design/_menu/seasonal.gif" ><div class="menuText2">Season</div></div></div></a></li><li level="2"><a href="/statistics"><div class="menuIcons2"><div class="menuWrapper"><img src="/design/_menu/statarc.gif" ><div class="menuText2">Statistics</div></div></div></a></li><li level="2"><a href="/playoffs"><div class="menuIcons2"><div class="menuWrapper"><img src="/design/_menu/playoff.gif" ><div class="menuText2">Playoffs</div></div></div></a></li><li level="2"><a href="/countries"><div class="menuIcons2"><div class="menuWrapper"><img src="/design/_menu/globe.gif" ><div class="menuText2">Countries</div></div></div></a></li><li level="2"><a href="/replays"><div class="menuIcons2"><div class="menuWrapper"><img src="/design/_menu/replays.gif" ><div class="menuText2">League replays</div></div></div></a></li><li level="2"><a href="/rules"><div class="menuIcons2"><div class="menuWrapper"><img src="/design/_menu/Lrules.gif" ><div class="menuText2">League rules</div></div></div></a></li><li level="2"><a href="/replaycomments"><div class="menuIcons2"><div class="menuWrapper"><img src="/design/giveComment.gif" ><div class="menuText2">Replay comments</div></div></div></a></li><li level="2"><a href="/replayhighlights"><div class="menuIcons2"><div class="menuWrapper"><img src="/design/_menu/highlights.gif" ><div class="menuText2">Replay highlights</div></div></div></a></li><li level="2"><a href="/analyzer?season=2"><div class="menuIcons2"><div class="menuWrapper"><img src="/design/_menu/wheel.gif" ><div class="menuText2">Point analyzer</div></div></div></a></li></ul> 
</li><li level="1"><a href="/profilesNNNs"><div class="menuIconsP"><div class="menuIcons"><div class="menuWrapper"><img src="/design/_menu/community.gif" ><div class="menuText">Community</div></div></div></div></a><ul><li level="2"><a href="/profilesNNNs"><div class="menuIcons2"><div class="menuWrapper"><img src="/design/_menu/NNNprofile.gif" ><div class="menuText2">Clan members</div></div></div></a></li><li level="2"><a href="/profilesLeague"><div class="menuIcons2"><div class="menuWrapper"><img src="/design/_menu/NNLprofile.gif" ><div class="menuText2">League members</div></div></div></a></li><li level="2"><a href="/profilesAdmins"><div class="menuIcons2"><div class="menuWrapper"><img src="/design/_menu/admins.gif" ><div class="menuText2">Administrators</div></div></div></a></li><li level="2"><a href="/profilesAll"><div class="menuIcons2"><div class="menuWrapper"><img src="/design/_menu/everybodyProfile.gif" ><div class="menuText2">All users</div></div></div></a></li><li level="2"><a href="/forum"><div class="menuIcons2"><div class="menuWrapper"><img src="/design/_menu/NNNforum.gif" ><div class="menuText2">NNN forum</div></div></div></a></li><li level="2"><a href="http://www.cwtsite.com"><div class="menuIcons2"><div class="menuWrapper"><img src="/design/_menu/CWTlogoBlackmed.gif"><div class="menuText2">CWT</div></div></div></a></li><li level="2"><a href="irc://irc.gamesurge.net/nnn"><div class="menuIcons2"><div class="menuWrapper"><img src="/design/_menu/IRC.gif" ><div class="menuText2">IRC channel</div></div></div></a></li><li level="2"><a href="/overallrates"><div class="menuIcons2"><div class="menuWrapper"><img src="/design/_menu/giveMedals.png" ><div class="menuText2">All rates</div></div></div></a></li></ul> 
</li><li level="1"><a href="controlpanel"><div class="menuIconsP"><div class="menuIcons"><div class="menuWrapper"><img src="/design/_menu/mypanel.png" ><div class="menuText">My&nbsp;panel</div></div></div></div></a></li><li level="1"><a href="/wormnet"><div class="menuIconsP"><div class="menuIcons"><div class="menuWrapper"><img src="/design/_menu/neticon.gif" ><div class="menuText">Hosting</div></div></div></div></a><ul><li level="2"><a href="/wormnet"><div class="menuIcons2"><div class="menuWrapper"><img src="/design/_menu/neticon.gif" ><div class="menuText2">Wormnet</div></div></div></a></li><li level="2"><a href="/directconnect"><div class="menuIcons2"><div class="menuWrapper"><img src="/design/_menu/directconnect.gif" ><div class="menuText2">Direct connect</div></div></div></a></li></ul> 
</li><li level="1"><a href="/competitions"><div class="menuIconsP"><div class="menuIcons"><div class="menuWrapper"><img src="/design/_menu/challenge.gif" ><div class="menuText">Competitions</div></div></div></div></a><ul><li level="2"><a href="/competitions"><div class="menuIcons2"><div class="menuWrapper"><img src="/design/_menu/tourney.gif" ><div class="menuText2">One evening tournament</div></div></div></a></li><li level="2"><a href="/competitions_2v2"><div class="menuIcons2"><div class="menuWrapper"><img src="/design/_menu/tourneys2on2.gif" ><div class="menuText2">2on2</div></div></div></a></li><li level="2"><a href="/competitions_cup"><div class="menuIcons2"><div class="menuWrapper"><img src="/design/_menu/cup.gif"><div class="menuText2">NNN cup</div></div></div></a></li><li level="2"><a href="/bestmove"><div class="menuIcons2"><div class="menuWrapper"><img src="/design/_menu/bestMove.gif" ><div class="menuText2">Best Move Contests</div></div></div></a></li><li level="2"><a href="/challenges"><div class="menuIcons2"><div class="menuWrapper"><img src="/design/_menu/challenges.gif" ><div class="menuText2">Challenges</div></div></div></a></li><li level="2"><a href="/calendar"><div class="menuIcons2"><div class="menuWrapper"><img src="/design/_menu/calendar2.gif" ><div class="menuText2">Calendar</div></div></div></a></li></ul> 
</li><li level="1"><a href="/rankinghistory"><div class="menuIconsP"><div class="menuIcons"><div class="menuWrapper"><img src="/design/_menu/history.gif"><div class="menuText">Archive</div></div></div></div></a><ul><li level="2"><a href="/rankinghistory"><div class="menuIcons2"><div class="menuWrapper"><img src="/design/_menu/history_rankings.gif" ><div class="menuText2">Ranking history</div></div></div></a></li><li level="2"><a href="/tourneyhistory"><div class="menuIcons2"><div class="menuWrapper"><img src="/design/_menu/history_tournament.gif"><div class="menuText2">Tourney history</div></div></div></a></li><li level="2"><a href="/NNNorigins"><div class="menuIcons2"><div class="menuWrapper"><img src="/design/_menu/wormEgg.gif" ><div class="menuText2">Clan history</div></div></div></a></li><li level="2"><a href="/retireds"><div class="menuIcons2"><div class="menuWrapper"><img src="/design/_menu/nyuggerek.gif" ><div class="menuText2">Retired members</div></div></div></a></li><li level="2"><a href="/museum"><div class="menuIcons2"><div class="menuWrapper"><img src="/design/_menu/museum.gif" ><div class="menuText2">Museum</div></div></div></a></li></ul> 
</li><li level="1"><a href="/NNNgoals"><div class="menuIconsP"><div class="menuIcons"><div class="menuWrapper"><img src="/design/_menu/knowledgebase.gif" "><div class="menuText">Knowledge&nbsp;base</div></div></div></div></a><ul><li level="2"><a href="/NNNgoals"><div class="menuIcons2"><div class="menuWrapper"><img src="/design/_menu/NNNgoal.gif" ><div class="menuText2">NNN clan goals</div></div></div></a></li><li level="2"><a href="/undone"><div class="menuIcons2"><div class="menuWrapper"><img src="/design/_menu/training.gif" ><div class="menuText2">Training missions</div></div></div></a></li><li level="2"><a href="/undone"><div class="menuIcons2"><div class="menuWrapper"><img src="/design/_menu/strategia.gif" ><div class="menuText2">Strategy</div></div></div></a></li><li level="2"><a href="/weapons"><div class="menuIcons2"><div class="menuWrapper"><img src="/design/_menu/weapons.gif" ><div class="menuText2">Weapons</div></div></div></a></li></ul> 
</li><li level="1"><a href="/links"><div class="menuIconsP"><div class="menuIcons"><div class="menuWrapper"><img src="/design/_menu/crate.gif" ><div class="menuText">Utils</div></div></div></div></a><ul><li level="2"><a href="/links"><div class="menuIcons2"><div class="menuWrapper"><img src="/design/_menu/links.gif" ><div class="menuText2">Links</div></div></div></a></li><li level="2"><a href="/files"><div class="menuIcons2"><div class="menuWrapper"><img src="/design/_menu/disk.gif"><div class="menuText2">Files</div></div></div></a></li></ul> 
</li></ul> 

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

它與Firefox效果很好。但通過Chrome瀏覽器，子菜單並未擴展至100％。如何解決這個問題？

Answer 1

鉻實際上得到這一個正確的：有當你把一個長期存在的Firefox的錯誤position: relative和display: table-cell（它不會工作，所以子菜單將相對於定位上下文的任何父母進行定位）。

要實現Firefox實際上正在跨瀏覽器進行的操作，只需從#nav > li中刪除position: relative即可。

除非您另行指定，否則您的子菜單的位置將取決於文檔中的自然位置。爲了減少這種脆弱性（我可以預見IE問題），在ul#nav中添加一個包裝，並給出position: relative;。然後您可以顯式地相對於該父級定位子導航。見this forked version of your fiddle，這應該在任何地方工作。最重要的更新的CSS：

#nav-wrapper {position: relative;} 

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

所以，在子菜單中，我明確設置top: 100%，然後left: 0; right: 0而不是設置的寬度。這樣（如果你想）你可以添加填充/邊框而不影響佈局。

我也整理了一下你的CSS。當設置爲display: block時，不要將寬度設置爲100％。這是多餘的，因爲塊級項目將填充可用的水平空間。再次忽略寬度意味着您可以添加填充等，而不會影響佈局。

Answer 2

看看這個http://jsfiddle.net/79wpn/1/，我評論width:100%

#nav ul { 
    /*display:none; 
    margin: 0; 
    padding: 0;*/ 
    display: none; 
    position: absolute; 
    /*width: 100%;*/ 
    left: 0px; 
}