Question

这是菜单：

    <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错误（它将无效，因此子菜单将相对于任何内容定位parent是定位上下文。）

要实现Firefox实际跨浏览的功能，只需从position: relative移除#nav > li。

除非您另有说明，否则您的子菜单的位置将是文档中的自然位置。为了使这不那么脆弱（我可以预见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;
}

菜单子菜单在Chrome中不起作用（位置：绝对值）

2 个答案: