水平菜單 - 全寬利的孩子UL的

我有一個水平菜單，表/表單元格標記：水平菜單 - 全寬利的孩子UL的

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

現在通常我只想讓第一級裏的position: relative和第二級UL position: absolute，並給它同樣大小我給鋰元素;但在這種情況下，我沒有一個固定的李的，所以我想這：

.menu li { 
    position: relative; 
} 

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

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

我的問題是：是否有可能在第二級UL元素擴展到其父的寬度，表單元格樣式李沒有回落到JavaScript的？

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

編輯＃1：它帶給我的注意，這實際上是工作在WebKit的瀏覽器和歌劇;所以真正的問題是，對於壁虎有沒有解決方案？

來源

2012-07-06 marc

此問題僅適用於Firefox。 Chrome會以您（可能）希望的方式顯示它。 – YMMD 2012-07-06 09:00:26

火狐不會讓你give a relative position to table-cells。用另一種元素的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; 
}

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

來源

2012-07-06 09:20:48 YMMD

很遺憾，你必須爲firefox使用額外的標記;但感謝您的解決方案！ – marc 2012-07-06 09:46:59

你是對的，但這是使用像'table-cell'這樣的黑客的自然結果。像往常一樣浮動的「李」永遠不會有這樣的表現。 :-)但是我當然明白你的觀點，你不能使用浮動來動態填充'ul'的整個寬度。我很樂意提供幫助！ – YMMD 2012-07-06 11:04:26

使用你的代碼我明白爲什麼ul擴展了，它是因爲它被絕對定位在身體上，它的寬度爲100％，與身體的寬度相匹配。我寧願覺得它比鉻的行爲更合乎邏輯。現在，將位置改爲相對的，使得容器ul實現了它的另一個ul，所以它的li元素擴展到覆蓋它，看看http://jsbin.com/iwesoc/2/edit#preview但是，僅僅通過將其他li的高度設置爲0就不能解決問題。因爲它們是繼承ul的高度。所以，我能得到的最接近的解決方案是http://jsbin.com/iwesoc/2/edit#preview。也許，它的一些用途。

來源

2012-07-06 09:52:49

水平菜單 - 全寬利的孩子UL的

回答

相關問題