菜单的子菜单在Chrome中不起作用(具有位置:绝对)

这是菜单：

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％。如何解决这个问题？

Chrome实际上是正确的：当您组合position: relative和display: table-cell时，有一个长期存在的Firefox错误（它不起作用，因此儿童菜单将与任何相对放置父母是定位上下文）。

要实现Firefox实际在做跨浏览器，只需从#nav > li中删除position: relative。

除非您另有说明，否则您的子菜单的位置将是文档中其自然位置的任何自然位置。为了使它变得不那么脆弱（我可以预见IE问题），请在ul#nav中添加包装器，然后给出该position: relative;。然后，您可以将子-NAV显式定位到该父母。请参阅您的小提琴的分叉版本，该版本几乎可以在任何地方工作。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％。它是冗余的，因为一个块级项目将填充可用的水平空间。再次遗漏宽度意味着您可以添加填充等，而不会拧紧您的布局。

请看一下此http://jsfiddle.net/79wpn/1/，我已经评论了width:100%

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

相关内容

最新更新

热门标签：