CSS水平導航懸停在IE 7中

本質上消失，我已經從列表中除了以下尼克的代碼：CSS水平導航懸停在IE 7中

http://www.alistapart.com/articles/horizdropdowns/

我已經做了些改動，主要是 - 我使用的背景圖像而不是背景顏色。一切都按預期工作，除了在IE7中，當懸停在其中一個子項上時，懸停列表（右側）消失。

的改變如下：

 
#sidebar ul.subnav { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
    width: 276px; 
} 

#sidebar ul.subnav li { 
    position: relative; 
} 

#sidebar ul.subnav li ul { 
    position: absolute; 
    left: 275px; 
    top: 0; 
    display: none; 
    width: 276px; 
    height: 58px; 
    z-index: 300; 
} 

#sidebar ul.subnav li a { 
    display: block; 
    text-decoration: none; 
    color: #444444; 
    height: 58px; 
    line-height: 58px; 
    text-indent: 35px; 
    font-size: 14px; 
    z-index: 300; 
} 

#sidebar ul.subnav li:hover ul { display: block; } 
#sidebar ul.subnav li.over ul { display: block; } 
#sidebar li.sub-item-1 { background: url('images/subnav-1.jpg') 0 no-repeat; } 
#sidebar li.sub-item-2 { background: url('images/subnav-2.jpg') 0 no-repeat; } 
#sidebar li.sub-item-3 { background: url('images/subnav-3.jpg') 0 no-repeat; } 
#sidebar li.sub-item-4 { background: url('images/subnav-4.jpg') 0 no-repeat; } 

#sidebar ul.subnav li.sub-item-1 ul li { background: url('images/rev-subnav-1.jpg') 0 no-repeat; } 
#sidebar ul.subnav li.sub-item-2 ul li { background: url('images/rev-subnav-2.jpg') 0 no-repeat; } 
#sidebar ul.subnav li.sub-item-3 ul li { background: url('images/rev-subnav-3.jpg') 0 no-repeat; } 
#sidebar ul.subnav li.sub-item-4 ul li { background: url('images/rev-subnav-4.jpg') 0 no-repeat; } 

/* Fix IE. Hide from IE Mac \*/ 
* html ul li { float: left; } 
* html ul li a { height: 1%; } 
/* End */

這裏的HTML，它並沒有改變太多：

  <ul class="subnav"> 
      <li class="sub-item-1"><a href="#">Nav Item 1</a> 
       <ul> 
        <li><a href="#">Link 1</a></li> 
        <li><a href="#">Link 2</a></li> 
        <li><a href="#">Link 3</a></li> 
       </ul> 
      </li> 
      <li class="sub-item-2"><a href="#">Nav Item 2</a> 
       <ul> 
        <li><a href="#">Link 1</a></li> 
        <li><a href="#">Link 2</a></li> 
        <li><a href="#">Link 3</a></li> 
       </ul> 
      </li> 
      <li class="sub-item-3"><a href="#">Nav Item 3</a> 
       <ul> 
        <li><a href="#">Link 1</a></li> 
        <li><a href="#">Link 2</a></li> 
        <li><a href="#">Link 3</a></li> 
       </ul> 
      </li> 
      <li class="sub-item-4"><a href="#">Nav Item 4</a> 
       <ul> 
        <li><a href="#">Link 1</a></li> 
        <li><a href="#">Link 2</a></li> 
        <li><a href="#">Link 3</a></li> 
       </ul> 
      </li> 
     </ul>

我嘗試以下一些建議在這裏的其他議題，但沒有似乎有所幫助。在這一點上，我可能會錯過一些小事。有人有主意嗎？

編輯：懸停導航涵蓋的內容區域導致該問題。

CSS如下：

 
#content { 
    width: 641px; 
    min-height: 300px; 
    position: absolute; 
    top: 0; 
    left: 278px; 
}

如果我刪除此，導航工作正常。我必須找到一種方式來設計內容區域的樣式。

編輯＃2：

添加一個背景顏色此內容元素（它位於下拉後）修復了IE7的問題。

來源

2011-02-15 duobuddy

簡單地增加一個背景色使得它在IE7工作：

#sidebar ul.subnav li a { 
    background: #fff 
}

Live Demo（edit）

如果沒有您的實際網頁上工作，我對你有一個問題。

您在頁面上使用了哪種文檔類型？（顯示您的文件的第一行）

來源

2011-02-15 20:00:45 thirtydot

使用XHTML 1.0過渡 - 背景聲明覆蓋正在使用的背景圖片，我甚至嘗試添加一個並沒有運氣宣佈它。 – duobuddy 2011-02-15 21:18:01

以下適用於我。

background: url("http://www.kvammetravel.com/images/menu_background.gif") repeat-x scroll left top transparent;

檢查下面的截圖 enter image description here

工程在IE7。如果這仍然不適合你，你需要在jsfiddle.net上發佈你的工作代碼，這樣我可以看看。

來源

2011-02-15 19:51:19 Hussein

CSS水平導航懸停在IE 7中

回答

相關問題