Question

在这里你可以找到一个菜单。

<ul id="nav"><li><a href="/"><div class="menuIcons"><div class="menuWrapper"><img src="http://www.fantom-xp.com/wallpapers/29/Focusing_example_image.jpg" alt="home icon"><div class="menuText">Home</div></div></div></a></li><li><a href="/"><div class="menuIcons"><div class="menuWrapper"><img src="http://www.fantom-xp.com/wallpapers/29/Focusing_example_image.jpg" alt="home icon"><div class="menuText">BBB</div></div></div></a><ul><li><a href="/overall"><div class="menuIcons"><div class="menuWrapper"><img src="http://www.fantom-xp.com/wallpapers/29/Focusing_example_image.jpg" alt="home icon"><div class="menuText">1</div></div></div></a></li><li><a href="/"><div class="menuIcons"><div class="menuWrapper"><img src="http://www.fantom-xp.com/wallpapers/29/Focusing_example_image.jpg" alt="home icon"><div class="menuText">2</div></div></div></a></li><li><a href="/"><div class="menuIcons"><div class="menuWrapper"><img src="http://www.fantom-xp.com/wallpapers/29/Focusing_example_image.jpg" alt="home icon"><div class="menuText">333</div></div></div></a></li><li><a href="/"><div class="menuIcons"><div class="menuWrapper"><img src="http://www.fantom-xp.com/wallpapers/29/Focusing_example_image.jpg" alt="home icon"><div class="menuText">44444</div></div></div></a></li><li><a href="/"><div class="menuIcons"><div class="menuWrapper"><img src="http://www.fantom-xp.com/wallpapers/29/Focusing_example_image.jpg" alt="home icon"><div class="menuText">5</div></div></div></a></li><li><a href="/"><div class="menuIcons"><div class="menuWrapper"><img src="http://www.fantom-xp.com/wallpapers/29/Focusing_example_image.jpg" alt="home icon"><div class="menuText">666</div></div></div></a></li><li><a href="/"><div class="menuIcons"><div class="menuWrapper"><img src="http://www.fantom-xp.com/wallpapers/29/Focusing_example_image.jpg" alt="home icon"><div class="menuText">777s</div></div></div></a></li><li><a href="/"><div class="menuIcons"><div class="menuWrapper"><img src="http://www.fantom-xp.com/wallpapers/29/Focusing_example_image.jpg" alt="home icon"><div class="menuText">8</div></div></div></a></li><li><a href="/"><div class="menuIcons"><div class="menuWrapper"><img src="http://www.fantom-xp.com/wallpapers/29/Focusing_example_image.jpg" alt="home icon"><div class="menuText">99s</div></div></div></a></li><li><a href="/"><div class="menuIcons"><div class="menuWrapper"><img src="http://www.fantom-xp.com/wallpapers/29/Focusing_example_image.jpg" alt="home icon"><div class="menuText">10r</div></div></div></a></li></ul>
    </li><li><a href="/"><div class="menuIcons"><div class="menuWrapper"><img src="http://www.fantom-xp.com/wallpapers/29/Focusing_example_image.jpg" alt="home icon"><div class="menuText">CCCCC</div></div></div></a><ul><li><a href="/">tak</a></li><li><a href="/">a</a></li><li><a href="/">b</a></li><li><a href="/">c</a></li><li><a href="/">cccccc</a></li><li><a href="/">d</a></li><li><a href="/">e</a></li></ul>

#nav {
    display:table;
    margin: 0; padding: 0;
}
#nav a
{
    background-color: red;
    display: block;
    width: 100%;
    text-align: center;
}
#nav > li {
    list-style:none;
    position:relative;
    display:table-cell;
    width:1%;
    text-align: center;
    background-color: #F1F1D9;
    color: black;
    font-family: 'Arial';
    font-size: 14px;
}
#nav ul li {
    width: 100%;
    display:block;
    background:#F1F2EA;
    position:relative;
    color: black;
    font-family: 'Arial';
    font-size: 14px;
    white-space:nowrap;
    text-align: left;
}
#nav ul li a {
    padding: 0px 0 0px 6px;
}
#nav ul {
    display:none;
    margin: 0; padding: 0;
}
#nav li:hover > ul {
    display:block;
    position:absolute;
    z-index:1000;
}
ul#nav > li:hover > ul {
    /*margin-left: -10px;*/
}
#nav > li ul li ul {
    left:100%;
    top:-2px;
    white-space:nowrap;
}
#nav li:hover > a, #nav li:hover {
    background-color: #12142E;
    color: #FFFF00;
}
#nav li, li a {
    color:#000;
    text-decoration:none;
}

.menuIcons
{
    display: table-cell;
    vertical-align: middle;
    height: 38px;
    background-color: green;
}
.menuIcons img
{
    max-width: 25px;
    max-height: 25px;
    width: 100%;
}
.menuWrapper { display:table; }

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

http://jsfiddle.net/ZQs3h/

更加语义化，我用绿色突出显示主菜单项。我只谈论水平滑杆。那些绿色区域

应该100％widthed并放在中心
应该只是放在中心位置，但要注意边缘仍然必须充当链接

也不是100% width，margin: 0 auto都没有帮助。

Answer 1

老实说，我不知道如何修复你的代码。我相信你正在寻找这个： Live demo (click).

唯一棘手的部分是Firefox不会在position: relative元素上确认display: table-cell。为了解决这个问题，我将嵌套的ul包装在div的{{1}}中。这也可以使用position: relative代替display: inline-block和table来完成，但您需要手动输入每个table-cell的宽度。最好的方法可能是li，但浏览器支持的方法较少。

示例加价：

flexbox

示例CSS：

  <ul class="nav">
    <li><a>Home</a></li>
    <li>
      <a>Our Staff</a>
      <div class="pos-fix">
      <ul class="vert">
        <li><a>Jon Skeet</a></li>
        <li><a>Spiderman</a></li>
      </ul> 
      </div>
    </li>
    <li><a>Contact Us</a></li>
  </ul>

响应式水平菜单（表格单元格），悬停时垂直下拉菜单

1 个答案: