可以兼容ie6的純CSS三級鼠標懸停顯示/隱藏菜單實現

本文轉載自查看原文 2013-10-31 22:59 3322 前端

本來在chrome上用js寫的好好的三級顯隱菜單，放到ie6上一測試竟然奇葩般的會瞎閃。問題原因至今沒參透，可能是我每次響應事件的處理代碼過長？？總之我是對ie6幻滅了，去網上搜一搜能支持ie6的下拉菜單的實現，發現了這個網站的實現：

http://www.jb51.net/article/12964.htm（請猛點我）

實現得相當漂亮，沒有用一行js代碼，其主要思想是將二級菜單嵌入到上一級菜單項的dom對象中，並使用上一級菜單項的hover偽類來控制二級菜單的visibility屬性。唯一美中不足的是這個實現只是一個二級菜單，我需要做一個三級的。試了一下與原實現類似的寫法：

ul li:hover ul { visibility: visible }

但這樣會有歧義，它區分不出是哪一級菜單項被懸停時應該顯示其下面的哪一級菜單。於是冥思苦想怎么解決菜單定位歧義的問題，解決方案是，對每一級菜單都指定不同的class名稱，這樣可以直接定位到某一級菜單，不會產生歧義。html代碼大體如下：

<ul class="l1-nav"> <!-- 第一級菜單 -->
  <li class="l1-nav"> <!-- 第一級菜單項 -->
    <ul class="l2-nav"> <!-- 第二級菜單 -->
      <li class="l2-nav"> <!-- 第二級菜單項 -->
        <ul class="l3-nav"> <!-- 第三級菜單 -->
          <li class="l3-nav"></li> <!-- 第三級菜單項 -->
        </ul>
      </li>
    </ul>
  </li>
</ul>

而控制顯示隱藏的代碼如下：

li.l1-nav:hover ul.l2-nav, li.l2-nav:hover ul.l3-nav 
{ visibility: visible }

不過對於ie6這個不聽話的頑劣之徒來說，如果真的這么簡單就太天真了。由於ie6只有a元素支持hover偽類，所以在ie中還要在li里包一個a元素。好在ie6中支持a元素里面包含其他元素，而不像其他瀏覽器里a元素不能包含其他元素（ie6奇葩之處不能勝數）。這樣寫出來的代碼就有一些繞。而且還有一個針對ie6的hack是必須把每一個li項包含在一個定位為relative的table中，至於為什么由於沒有刪除一點點測還不得知，據猜測可能跟浮動定位有關。閑話不多說，上代碼吧，css還是很簡潔的，html就又臭又長還不好理解，誰讓咱要考慮兼容性呢：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--定義過渡型DOCTYPE-->  
<html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312"><!--定義名字空間-->  
<head>

<title>網頁布局+純CSS三級鼠標懸停顯示/隱藏菜單</title><!--標題欄-->  
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><!--定義語言編碼-->  
<meta http-equiv="Content-Language" content="gb2312" /><!--針對老版瀏覽器定義語言編碼-->  
<meta content="all" name="robots" /><!--允許搜索機器人-->  
<meta name="author" content="" /><!--作者信息-->  
<meta name="Copyright" content=",共同探討,允許轉載" /><!--版權信息-->  
<meta name="description" content="下拉菜單,CSS,布局" /><!--簡介-->  
<meta content="下拉,菜單,CSS,布局" name="keywords" /><!--關鍵詞--> 

<style type=text/css>
    * {  
      margin: 0;  
      padding: 0;  
      border: 0;
    }

    html {  
      background: #bfc4c7; /*背景顏色*/  
    }  

    body {
      font: 12px/150% '宋體';  
      margin: 0 auto;  
      width: 770px;
      text-align: center;
    }

    /*menu部分*/  

    #menu {  
      margin: 0 auto;  
        
      width: 770px !important;  
      clear: both  
    }
      
    #menu ul {
      list-style: none;  
    }

    #menu table {
      position: absolute;  
      left: 0;  
      top: 0;  
    }

    li.l1-nav {
      float: left;  
      position: relative; 
      left: 0px;
      top: 0px;
    }

    a.l1-nav {  
      display: block;  
      text-align: center;  
      text-decoration: none;  
      width: 77px;
      height: 30px;
      line-height: 30px;
      color: #000;
      background: #c9c9a7;
    }

    li.l1-nav:hover a.l1-nav, a.l1-nav:hover {  
      color: #fff;
      background: #b3ab79;  
    }

    ul.l2-nav {
      visibility: hidden;
      position: absolute;  /* 第二級菜單相對於第一級菜單絕對定位 */
      left: 0px;
      top: 30px;
    }

    li.l2-nav {
      float: left;  
      position: relative; /* 這里把第二級菜單項設成相對定位，以使得它包含的三級菜單相對它自己定位 */
      left: 0px;
      top: 0px;
    }

    a.l2-nav {  
      display: block; /* 把a設成塊級顯示 */
      text-align: center;  
      text-decoration: none;  
      width: 77px;
      height: 30px;
      line-height: 30px;
      color: #000;
      background: #faeec7;  
    }

    li.l2-nav:hover a.l2-nav, a.l2-nav:hover {  
      color: #fff;
      background: #dfc184;
    }

    ul.l3-nav {  
      visibility: hidden;
      position: absolute;  
      left: 77px;
      top: 0px;
    }

    /* 這是控制菜單顯示與隱藏的重點 */
    a.l1-nav:hover ul.l2-nav, li.l1-nav:hover ul.l2-nav, a.l2-nav:hover ul.l3-nav, li.l2-nav:hover ul.l3-nav {
      visibility: visible;
    }

    a.l3-nav {  
      display: block;  
      width: 77px;
      height: 30px;
      line-height: 30px;
      background: red;  
      color: #000;  
      text-decoration: none;
    }

    a.l3-nav:hover {  
      background: blue;
      color: #000;
    }

</style>

</head>  

<body>  

<div id="menu">    
  <ul class="l1-nav">    
  
    <li class="l1-nav">  
      <!-- IE6里面a元素可以包含其他元素，且只有a能夠支持hover偽類，但ul還要放在一個table中。而chrome中，a不可以包含其他元素，但li支持hover偽類。所以這一段有些繞。 -->
      <a class="l1-nav" href="">第一分類
<!--[if IE 7]><!-->
      </a>
<!--<![endif]-->
<!--[if lte IE 6]>
        <table>
          <tr>
            <td>
<![endif]-->
              <ul class="l2-nav">
              
                <li class="l2-nav">
                  <a class="l2-nav" href="">XHTML
<!--[if IE 7]><!-->
                  </a>
<!--<![endif]-->
<!--[if lte IE 6]>
                    <table>
                      <tr>
                        <td>
<![endif]-->
                          <ul class="l3-nav">
                            <li><a class="l3-nav" href="">XHTML1</a></li>
                            <li><a class="l3-nav" href="">XHTML2</a></li>
                            <li><a class="l3-nav" href="">XHTML3</a></li>
                          </ul>
<!--[if lte IE 6]>
                        </td>
                      </tr>
                    </table>
                  </a>
<![endif]-->
                </li>
                
                <li class="l2-nav">
                  <a class="l2-nav" href="">CSS
<!--[if IE 7]><!-->
                  </a>
<!--<![endif]-->
<!--[if lte IE 6]>
                    <table>
                      <tr>
                        <td>
<![endif]-->
                          <ul class="l3-nav">
                            <li><a class="l3-nav" href="">CSS1</a></li>
                            <li><a class="l3-nav" href="">CSS2</a></li>
                            <li><a class="l3-nav" href="">CSS3</a></li>
                          </ul>
<!--[if lte IE 6]>
                        </td>
                      </tr>
                    </table>
                  </a>
<![endif]-->
                </li>
                
                <li class="l2-nav">
                  <a class="l2-nav" href="">PHP
<!--[if IE 7]><!-->
                  </a>
<!--<![endif]-->
<!--[if lte IE 6]>
                    <table>
                      <tr>
                        <td>
<![endif]-->
                          <ul class="l3-nav">
                            <li><a class="l3-nav" href="">PHP1</a></li>
                            <li><a class="l3-nav" href="">PHP2</a></li>
                            <li><a class="l3-nav" href="">PHP3</a></li>
                          </ul>
<!--[if lte IE 6]>
                        </td>
                      </tr>
                    </table>
                  </a>
<![endif]-->
                </li>
                
                <li class="l2-nav">
                  <a class="l2-nav" href="">MySQL
<!--[if IE 7]><!-->
                  </a>
<!--<![endif]-->
<!--[if lte IE 6]>
                    <table>
                      <tr>
                        <td>
<![endif]-->
                          <ul class="l3-nav">
                            <li><a class="l3-nav" href="">MySQL1</a></li>
                            <li><a class="l3-nav" href="">MySQL2</a></li>
                            <li><a class="l3-nav" href="">MySQL3</a></li>
                          </ul>
<!--[if lte IE 6]>
                        </td>
                      </tr>
                    </table>
                  </a>
<![endif]-->
                </li>
                
                <li class="l2-nav">
                  <a class="l2-nav" href="">Fireworks
<!--[if IE 7]><!-->
                  </a>
<!--<![endif]-->
<!--[if lte IE 6]>
                    <table>
                      <tr>
                        <td>
<![endif]-->
                          <ul class="l3-nav">
                            <li><a class="l3-nav" href="">Fireworks1</a></li>
                            <li><a class="l3-nav" href="">Fireworks2</a></li>
                            <li><a class="l3-nav" href="">Fireworks3</a></li>
                          </ul>
<!--[if lte IE 6]>
                        </td>
                      </tr>
                    </table>
                  </a>
<![endif]-->
                </li>
                
                <li class="l2-nav">
                  <a class="l2-nav" href="">Photoshop
<!--[if IE 7]><!-->
                  </a>
<!--<![endif]-->
<!--[if lte IE 6]>
                    <table>
                      <tr>
                        <td>
<![endif]-->
                          <ul class="l3-nav">
                            <li><a class="l3-nav" href="">Photoshop1</a></li>
                            <li><a class="l3-nav" href="">Photoshop2</a></li>
                            <li><a class="l3-nav" href="">Photoshop3</a></li>
                          </ul>
<!--[if lte IE 6]>
                        </td>
                      </tr>
                    </table>
                  </a>
<![endif]-->
                </li>
                
                <li class="l2-nav">
                  <a class="l2-nav" href="">Flash
<!--[if IE 7]><!-->
                  </a>
<!--<![endif]-->
<!--[if lte IE 6]>
                    <table>
                      <tr>
                        <td>
<![endif]-->
                          <ul class="l3-nav">
                            <li><a class="l3-nav" href="">Flash1</a></li>
                            <li><a class="l3-nav" href="">Flash2</a></li>
                            <li><a class="l3-nav" href="">Flash3</a></li>
                          </ul>
<!--[if lte IE 6]>
                        </td>
                      </tr>
                    </table>
                  </a>
<![endif]-->
                </li>

              </ul>
<!--[if lte IE 6]>
            </td>  
          </tr>  
        </table>
      </a>      
<![endif]-->    
    </li>  
    
    <li class="l1-nav">  
      <a class="l1-nav" href="">第一分類
<!--[if IE 7]><!-->
      </a>
<!--<![endif]-->
<!--[if lte IE 6]>
        <table>
          <tr>
            <td>
<![endif]-->
              <ul class="l2-nav">
              
                <li class="l2-nav">
                  <a class="l2-nav" href="">XHTML
<!--[if IE 7]><!-->
                  </a>
<!--<![endif]-->
<!--[if lte IE 6]>
                    <table>
                      <tr>
                        <td>
<![endif]-->
                          <ul class="l3-nav">
                            <li><a class="l3-nav" href="">XHTML1</a></li>
                            <li><a class="l3-nav" href="">XHTML2</a></li>
                            <li><a class="l3-nav" href="">XHTML3</a></li>
                          </ul>
<!--[if lte IE 6]>
                        </td>
                      </tr>
                    </table>
                  </a>
<![endif]-->
                </li>
                
                <li class="l2-nav">
                  <a class="l2-nav" href="">CSS
<!--[if IE 7]><!-->
                  </a>
<!--<![endif]-->
<!--[if lte IE 6]>
                    <table>
                      <tr>
                        <td>
<![endif]-->
                          <ul class="l3-nav">
                            <li><a class="l3-nav" href="">CSS1</a></li>
                            <li><a class="l3-nav" href="">CSS2</a></li>
                            <li><a class="l3-nav" href="">CSS3</a></li>
                          </ul>
<!--[if lte IE 6]>
                        </td>
                      </tr>
                    </table>
                  </a>
<![endif]-->
                </li>
                
                <li class="l2-nav">
                  <a class="l2-nav" href="">PHP
<!--[if IE 7]><!-->
                  </a>
<!--<![endif]-->
<!--[if lte IE 6]>
                    <table>
                      <tr>
                        <td>
<![endif]-->
                          <ul class="l3-nav">
                            <li><a class="l3-nav" href="">PHP1</a></li>
                            <li><a class="l3-nav" href="">PHP2</a></li>
                            <li><a class="l3-nav" href="">PHP3</a></li>
                          </ul>
<!--[if lte IE 6]>
                        </td>
                      </tr>
                    </table>
                  </a>
<![endif]-->
                </li>
                
                <li class="l2-nav">
                  <a class="l2-nav" href="">MySQL
<!--[if IE 7]><!-->
                  </a>
<!--<![endif]-->
<!--[if lte IE 6]>
                    <table>
                      <tr>
                        <td>
<![endif]-->
                          <ul class="l3-nav">
                            <li><a class="l3-nav" href="">MySQL1</a></li>
                            <li><a class="l3-nav" href="">MySQL2</a></li>
                            <li><a class="l3-nav" href="">MySQL3</a></li>
                          </ul>
<!--[if lte IE 6]>
                        </td>
                      </tr>
                    </table>
                  </a>
<![endif]-->
                </li>
                
                <li class="l2-nav">
                  <a class="l2-nav" href="">Fireworks
<!--[if IE 7]><!-->
                  </a>
<!--<![endif]-->
<!--[if lte IE 6]>
                    <table>
                      <tr>
                        <td>
<![endif]-->
                          <ul class="l3-nav">
                            <li><a class="l3-nav" href="">Fireworks1</a></li>
                            <li><a class="l3-nav" href="">Fireworks2</a></li>
                            <li><a class="l3-nav" href="">Fireworks3</a></li>
                          </ul>
<!--[if lte IE 6]>
                        </td>
                      </tr>
                    </table>
                  </a>
<![endif]-->
                </li>
                
                <li class="l2-nav">
                  <a class="l2-nav" href="">Photoshop
<!--[if IE 7]><!-->
                  </a>
<!--<![endif]-->
<!--[if lte IE 6]>
                    <table>
                      <tr>
                        <td>
<![endif]-->
                          <ul class="l3-nav">
                            <li><a class="l3-nav" href="">Photoshop1</a></li>
                            <li><a class="l3-nav" href="">Photoshop2</a></li>
                            <li><a class="l3-nav" href="">Photoshop3</a></li>
                          </ul>
<!--[if lte IE 6]>
                        </td>
                      </tr>
                    </table>
                  </a>
<![endif]-->
                </li>
                
                <li class="l2-nav">
                  <a class="l2-nav" href="">Flash
<!--[if IE 7]><!-->
                  </a>
<!--<![endif]-->
<!--[if lte IE 6]>
                    <table>
                      <tr>
                        <td>
<![endif]-->
                          <ul class="l3-nav">
                            <li><a class="l3-nav" href="">Flash1</a></li>
                            <li><a class="l3-nav" href="">Flash2</a></li>
                            <li><a class="l3-nav" href="">Flash3</a></li>
                          </ul>
<!--[if lte IE 6]>
                        </td>
                      </tr>
                    </table>
                  </a>
<![endif]-->
                </li>

              </ul>
<!--[if lte IE 6]>
            </td>  
          </tr>  
        </table>
      </a>      
<![endif]-->    
    </li>  
    
  </ul>    
</div>  

</body><!--網頁主體結束-->  
</html>

實現效果如下：

經虛擬機xp下親測，非常流暢，一點不閃。有任何不甚嚴謹之處還敬請指教！

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Html中鼠標懸停顯示二級菜單的兩種方法 Selenium筆記---鼠標懸停顯示二級菜單點擊下拉列表鼠標懸停顯示隱藏省略文字鼠標懸停顯示CSS3動畫邊框【Web】CSS實現鼠標懸停實現顯示與隱藏特效實現Bootstrap導航條可點擊和鼠標懸停顯示下拉菜單 Selenium操作示例——鼠標懸停顯示二級菜單，再點擊二級菜單或下拉列表 CSS或者JS實現鼠標懸停顯示另一元素簡單實現鼠標懸停顯示圖片 bootstrap 鼠標懸停顯示