响应水平菜单(表格单元)，垂直下拉式悬停。

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%加宽并放置中心。
• 应该放在中间，但要注意边缘必须仍然是连接的。

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

Answer 1

我真的不知道怎么修正你的代码。我相信你是在找这个：现场演示(点击)。

唯一棘手的部分是火狐不会承认position: relative上的display: table-cell元素。为了解决这个问题，我将嵌套的ul封装在一个有position: relative的div中。这也可以使用display: inline-block而不是table和table-cell来完成，但是您需要手动输入每个li的宽度。最好的方法可能是flexbox，但浏览器不太支持它。

示例标记：

  <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>

示例CSS:

body, ul, li, a {
  margin: 0;
  padding: 0;
}

a {
  cursor: pointer;
}

.nav {
  list-style: none;
  width: 100%;
  display: table;
}

.nav li {
  display: table-cell;
  background: red;
}

.nav a {
  display: block;
  text-align: center;
  padding: 10px;
}

.pos-fix {
  position: relative;
}

.nav a:before {
  content: '';
  display: inline-block;
  height: 30px;
  width: 30px;
  background: url(http://placehold.it/30x30);
  float: left;
  margin: -5px 0 0 0;
}

.nav a:hover {
  background: black;
  color: yellow;
}

.nav li:hover .vert {
  display: block;
}

.vert {
  display: none;
  width: 100%;
  position: absolute;
}
.vert li {
  width: 100%;
  display: block;
}