CSS IE7我如何強制LI內的UL比父母更寬

我有一個下拉菜單，除了Internet Explorer 7以外，它完美的工作。謝謝MS。CSS IE7我如何強制LI內的UL比父母更寬

爲了演示的目的，我創建了這個簡單的HTML。下拉菜單可以快速說明問題。在IE 7中，下拉菜單被切割爲頂級菜單的寬度。在IE8和IE9中這不是問題。

我可以通過添加下面的JavaScript解決這個問題：

element.style.width = 320px的

完美的作品，但我需要這個自動完成像IE8或IE9會做，否則我要分別計算每個下拉寬度。下面

HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <style> 
     ul.menu {list-style:none;font:10px Trebushet MS;font-weight:bold;margin:0;padding:0;position:absolute;left:86px;top:90px;line-height:100%;height:15px} 
     ul.menu * {margin:0;padding:0;cursor:pointer} 
     ul.menu .header {position:relative; float:left;color:#999999;padding: 3px 12px 2px 4px;white-space:nowrap} 
     ul.menu .header ul {position:absolute; top:15px; left:0;background:#f0f0f0; overflow: hidden;list-style:none} 
     ul.menu .header ul li {position:relative; padding: 3px 25px 3px 10px; white-space:nowrap; display: block} 
     ul.menu .header ul li:hover {background-color:#dcdcdc} 
    </style> 
</head> 
<body> 
<ul class="menu" id="menu"> 
    <li class="header"> 
     CREATE 
     <ul> 
      <li>A really really long description of nothing valuable</li> 
      <li>test1</li> 
      <li>test2</li> 
      <li>test3 and again very long</li> 
     </ul> 
    </li> 
    <li class="header"> 
     SEARCH 
     <ul> 
      <li>test1</li> 
      <li>test1</li> 
      <li>test1</li> 
      <li>test1</li> 
     </ul> 
    </li> 
</ul> 
</body> 
</html>

來源

2013-03-01 user2124385

的嵌套UL overflow屬性設置在這裏的原因。從ul.menu .header ul中刪除overflow: hidden屬性應該糾正此問題。

在這裏看到一個小提琴：http://jsfiddle.net/b45rA/1/embedded/result/。您可能需要使用再次運行命令（右上角）來呈現輸出，因爲jsfiddle在IE7中播放效果不佳。

來源

2013-03-01 17:14:45

CSS IE7我如何強制LI內的UL比父母更寬

回答

相關問題