水平菜單 - li的孩子ul的全寬

Question

我有一個帶表/表格標簽的水平菜單：

.menu {
  display: table;
  width: 100%;
}

.menu li {
  display: table-cell;
}

<!doctype html>
<html>
  <body>
    <div style="width: 960px">
      <ul class="menu">
       <li><span>Selected Menu Item</span></li>
       <li><a href="#item">Another Item</a></li>
       <li><a href="#item">Another Item</a></li>
       <li><a href="#item">Another Item</a></li>
      </ul>
    </div>
  </body>
</html>

這工作正常，但我也有子菜單

<ul class="menu">
  <li><span>Selected Menu Item</span></li>
  <li><a href="#item">Another Item</a>
    <ul class="submenu">
      <li><a href="#sub">Submenu Item</a></li>
      <li><a href="#sub">Submenu Item</a></li>
    </ul>
  </li>
 </ul>

現在通常我只會制作第一級li的position: relative和第二級ul position: absolute並給它與我給li元素相同的大小; 但在這種情況下，我沒有為李的固定，所以我嘗試了這個：

.menu li {
  position: relative;
}

ul.submenu {
  position: absolute;
  width: 100%;
}

但它不是 - 正如我所料 - 擴展到其父（li）的100％寬度，而是獲得最近指定元素的寬度（在這種情況下，我認為寬度為960px的div，但它也可能更大）。

我的問題是：是否有可能將第二級ul元素擴展到其父級的寬度，表格單元格樣式的li而不回退到JavaScript？

我知道這個事實，我必須為禁用的瀏覽器編寫一個腳本，比如IE <= 7。 這是一個運行的例子： http ： //jsfiddle.net/hy73d/

編輯＃1：引起我的注意，這實際上適用於webkit瀏覽器和歌劇; 所以真正的問題是，是否有壁虎的解決方案？

Answer 1

Firefox不會讓你給表格單元格提供相對位置。 在你的td使用另一個元素並使其相對定位：

<ul class="menu">
  <li><span>Selected Menu Item</span></li>
  <li><a href="#item">Another Item with Sub</a>
    <div>
      <ul class="submenu">
        <li><a href="#sub">Submenu Item</a></li>
        <li><a href="#sub">Submenu Item</a></li>
      </ul>
    </div>
  </li>
  <li><a href="#item">Another Item</a></li>
  <li><a href="#item">Another Item</a></li>
</ul>

當然只將CSS規則應用於您的新div：

.menu li {
  display: table-cell;
}
.menu li div {
  position: relative;
  background: #444;
}

這將在所有瀏覽器中更好地工作。

Answer 2

使用你的代碼我確實理解為什么ul正在擴展，因為它被定位在身體的絕對位置，其寬度為100％與身體的寬度相匹配。 我寧願發現它比chrome的行為更合乎邏輯。 現在，將位置更改為相對使容器ul實現其持有另一個ul，因此其li元素展開以覆蓋它，看看http://jsbin.com/iwesoc/2/edit#preview但問題無法解決只需將其他li的高度設置為0.因為它們繼承了ul的高度。 所以，我能得到的最接近的是這個解決方案http://jsbin.com/iwesoc/2/edit#preview 。 也許，它有一些用處。

水平菜單 - li的孩子ul的全寬

問題描述

2 個解決方案

解決方案1
3 已采納 2012-07-06 09:20:48

解決方案2
0 2012-07-06 09:52:49

水平菜單 - li的孩子ul的全寬

問題描述

2 個解決方案

解決方案1 3 已采納 2012-07-06 09:20:48

解決方案2 0 2012-07-06 09:52:49

解決方案1
3 已采納 2012-07-06 09:20:48

解決方案2
0 2012-07-06 09:52:49