CSS下拉式菜單中的IE 7

這裏不工作是樣品點：CSS下拉式菜單中的IE 7

http://tronitech.brettatkin.com/solutions.asp

在IE 7中，下拉菜單是不正確（真的不是全部）工作。在懸停做顯示，但這是關於它。

這是我第一次嘗試通過創建CSS僅下拉菜單，所以我歡迎所有關於代碼的反饋和批評。

感謝

佈雷特

來源

2011-06-29 Brett

這是我的CSS文件：http://tronitech.brettatkin.com/inc/styles.css – Brett

一個修復程序是很容易的：

論styles.css 266行：

#nav ul li { 
    float: left; 
    position: relative; 
}

變化：#nav ul li到#nav > ul > li。問題已修復。

也就是說，用直接child combinators（>）替換descendant combinators（空間：）。這可以防止子菜單中的li出現問題float: left，同時仍允許起始li保留float: left。

來源

2011-06-29 15:32:01 thirtydot

是的，它修復了它！這是什麼意思？ – Brett

我剛給我的答案加了一個解釋。 – thirtydot

解決這樣的問題，通常要求CSS和相應的代碼 - 如果JS用來添加一個類，例如 - 與你的問題一併公佈。我猜想，在開始時，菜單中的大小（邊距，填充或高度變化）存在問題。看起來像懸停在第一個子菜單項上時，剩下的<li>項目被碰撞。浮球看起來很明顯，而且由於第二個項目向右跳，這就是我的猜測。我沒有看到任何課程變更，您的CSS是否嚴格依賴懸停？

來源

2011-06-29 15:27:47 Lazer

是的，CSS只懸停。我不明白「浮動看起來很明顯」的說法。 – Brett

您在此css #nav ul li中設置了float: left;，它也影響子列表。

您需要在CSS #nav ul li:hover ul li

或

做的修改添加float:none;：#nav ul li到#nav > ul > li在他的回答中提到thirtydot。

來源

2011-06-29 15:34:59

看到它在這裏工作：http://jsfiddle.net/AgdGs/19/ –

你的修復也可以，而且也很簡單。雖然，它似乎更好地使用'#nav ul li li li {float：none}'*（刪除'：hover'）* – thirtydot

是的，謝謝@ thirtydot –

CSS下拉式菜單中的IE 7

回答

相關問題