html - 菜单的子菜单在 Chrome 中不起作用(位置为 : absolute) 的东西

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

Chrome 实际上是正确的:当您将 position: relative 和 display: table-cell 结合使用时，Firefox 存在一个长期存在的错误(它不会工作，因此子菜单将相对于定位上下文的任何父级进行定位。

要实现 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%。这是多余的，因为 block 级元素将填充可用的水平空间。再次省略宽度意味着您可以添加填充等，而不会搞砸您的布局。