Проблема совместимости IE7 с раскрывающимся списком навигации (3 уровня) CSS / Javascript - PullRequest
Новая
       27

Проблема совместимости IE7 с раскрывающимся списком навигации (3 уровня) CSS / Javascript

0 голосов
/ 10 февраля 2012

Я создал навигацию CSS / Javascript, которая имеет 3 уровня.Навигация отлично работает во всех браузерах, кроме IE7.Проблема заключается в следующем: если я прокручиваю «Все продукты», затем следую за выпадающим списком «Новые Маки» или «Используемые Маки» и затем перемещаю курсор мыши влево;с этого момента каждый раз, когда я наводю курсор мыши на «Все продукты», фоновое изображение для 3-го уровня отображается без какого-либо содержимого.Вы поймете, что я имею в виду, если вы просматриваете веб-сайт в браузерном режиме IE 9 (IE7).В любом случае, я мог бы отчаянно использовать некоторую помощь!

Спасибо, DH

Вот навигация, на которую я ссылаюсь: http://demo2.reclaimdesign.com/testnav2.html

И ниже код.

CSS 

/* CSS Document */
h5 {font-family:'FranklinGothicLT-BookCnd', Arial, Helvetica, sans-serif;font-  size:13px;font-weight:normal;color:#ff8e04;text-transform:uppercase;letter-spacing:-1px;margin:0; }
img{border:none;}

#header
{
position:relative;
z-index:100;
padding-bottom:38px;
}

#nav{width:965px;position:absolute;}

#menu {list-style:none;padding:0;margin:0;}

.menu-item {position:relative;float:left;line-height:30px;}

#menuAllProducts{background:url(../images/nav/all_products.png) no-repeat;width:110px;height:35px;z-index:100;position:relative;text-indent:-9000px;margin-right:4px;}
    #sub-menuAllProducts ul.sub-menu{position:absolute;top:45px;left:0;width:199px;list-style:none;padding:10px 0 0;margin:0;background:#ff8e04;border:solid 1px #a3a3a3;box-shadow:3px 4px 10px -3px #555454;}
    #sub-menuAllProducts li.sub-item{position:relative;height:26px;line-height:30px;padding-left:10px;background:#ff8e04 url(../images/background/nav_dropdown.png) no-repeat;}
    #sub-menuAllProducts li.sub-item:hover{background:#fcba00;color:#fff;}
    #sub-menuAllProducts li.sub-item a, 
    #sub-menuAllProducts li.sub-item a:link,
    #sub-menuAllProducts li.sub-item a:active{color:#fd9b24;text-decoration:none;font-family: Arial, Helvetica, sans-serif;font-weight:bold;font-size:12px;} 
    #sub-menuAllProducts li.sub-item a:hover{color:#fff;}

    #sub-menuAllProducts #third-menuNewMacs{top:0;right:-470px; width:468px;height:151px;background:url(../images/background/nav_newmacs.png) no-repeat;}
    #sub-menuAllProducts #third-menuNewMacs ul {float:left;margin:0;padding:0;list-style:none;line-height:100%;width:100px;}
    #sub-menuAllProducts #third-menuNewMacs ul.menuMacMini{width:65px;}
    #sub-menuAllProducts #third-menuNewMacs li {height:auto;line-height:20px;color:#595858;font-family:Arial, Helvetica, sans-serif;font-weight:bold;font-size:12px;text-align:center;}
        #sub-menuAllProducts #third-menuNewMacs li a, 
        #sub-menuAllProducts #third-menuNewMacs li a:link, 
        #sub-menuAllProducts #third-menuNewMacs li a:active{color:#35cffa;text-decoration:none;font-family:Arial, Helvetica, sans-serif;font-weight:normal;font-size:11px;} 
        #sub-menuAllProducts #third-menuNewMacs li a:hover{color:#35cffa;text-decoration:underline;}

    #sub-menuAllProducts #third-menuNewMacs .arrow{position:absolute;top:0;left:-2px;}
    #sub-menuAllProducts #third-menuUsedMacs{top:-27px;right:-752px;width:750px;}
    #sub-menuAllProducts #third-menuUsedMacs .arrow{position:absolute;top:27px;left:-2px;}

    #sub-menuAllProducts .third-menu {list-style:none;padding:0;margin:0;background:#f7f7f7;border:solid 1px #a3a3a3;box-shadow: 3px 4px 10px -3px #555454;}
    #sub-menuAllProducts .third-menu ul {float:left;margin:0;padding:5px 10px;list-style:none;line-height:100%;width:160px;}
    #sub-menuAllProducts .third-menu li a, 
    #sub-menuAllProducts .third-menu li a:link, 
    #sub-menuAllProducts .third-menu li a:active{color:#6a6a6a;text-decoration:none;font-family:Arial, Helvetica, sans-serif;font-weight:normal;font-size:11px;} 
    #sub-menuAllProducts .third-menu li a:hover{color:#6a6a6a;text-decoration:underline;}
    #sub-menuAllProducts .third-menu li a, .third-menu li a:link, .third-menu li a:active{color:#6a6a6a;text-decoration:none;font-family:Arial, Helvetica, sans-serif;font-weight:normal;font-size:11px;} 
    #sub-menuAllProducts .third-menu li a:hover{color:#6a6a6a;text-decoration:underline;}
    #sub-menuAllProducts .third-menu li {height:auto;line-height:20px;color:#595858;font-family:Arial, Helvetica, sans-serif;font-weight:bold;font-size:12px;}
    #sub-menuAllProducts .third-menu li h5{color:#ff8e04;border-bottom:solid 1px #cbcbca;}

ul.sub-menu {position:absolute;top:45px;left:0;z-index:50;width:199px;list-style:none;padding:10px 0 0;margin:0;display:none;background:#ff8e04;border:solid 1px #a3a3a3;box-shadow: 3px 4px 10px -3px #555454;}
    li.menu-item:hover .sub-menu { display: block; }

li.sub-item {position:relative;height:26px;line-height:30px;padding-left:10px;background:#f7f7f7;}
    li.sub-item:hover { background:#b8b7b6;color:#fff;}
    li.sub-item:hover .third-menu { display: block; }
    li.sub-item a, li.sub-item a:link,li.sub-item a:active{color:#6a6a6a;text-decoration:none;font-family: Arial, Helvetica, sans-serif;font-weight:bold;font-size:11px;}  
    li.sub-item a:hover{color:#fff;}

.third-menu {position:absolute;top:-27px;right:-752px;width:750px;list-style:none;padding:0;margin:0;display:none;background:#f7f7f7;border:solid 1px #a3a3a3;box-shadow: 3px 4px 10px -3px #555454;}
    .third-menu .bkg{background:#b8b7b6;height:10px;}
    .third-menu ul {float:left;margin:0;padding:5px 10px;list-style:none;line-height:100%;width:160px;}
    .third-menu li {height:auto;line-height:20px;color:#595858;font-family:Arial, Helvetica, sans-serif;font-weight:bold;font-size:12px;}
    .third-menu li a, .third-menu li a:link, .third-menu li a:active{color:#6a6a6a;text-decoration:none;font-family:Arial, Helvetica, sans-serif;font-weight:normal;font-size:11px;} 
    .third-menu li a:hover{color:#6a6a6a;text-decoration:underline;}
    .third-menu li h5{color:#ff8e04;border-bottom:solid 1px #cbcbca;}

.stretch,.clear {clear: both;height: 1px;margin: 0;padding: 0;font-size: 15px;line-height: 1px;}

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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link href="css/test.css" rel="stylesheet" type="text/css" />
<link href="css/ie7.css" rel="stylesheet" type="text/css" />
<!-- JavaScript -->
<script type="text/javascript">
 function changeBackground(oEl, iMode) {
var sId = oEl.id;
if (sId == null) alert("Your Element Does Not Have An ID!");

if ((sId == 'menuAllProducts') || (sId == 'sub-menuAllProducts')) {
    if (iMode == 1) {
        document.getElementById('menuAllProducts').style.backgroundPosition='0px -35px';
        document.getElementById('menuAllProducts').style.height = "46px";
    } else if (iMode == 2) {
        document.getElementById('menuAllProducts').style.backgroundPosition='0px 0px';
        document.getElementById('menuAllProducts').style.height = "35px";
    }
} else if ((sId == 'menuCustomerResources') || (sId == 'sub-menuCustomerResources' ))  {
    if (iMode == 1) {
        document.getElementById('menuCustomerResources').style.backgroundPosition='0px -35px';
        document.getElementById('menuCustomerResources').style.height = "46px";
    } else if (iMode == 2) {
        document.getElementById('menuCustomerResources').style.backgroundPosition='0px 0px';
        document.getElementById('menuCustomerResources').style.height = "35px";
    }
} else if ((sId == 'menuPowerMaxAttitude') || (sId == 'sub-menuPowerMaxAttitude' )) {
    if (iMode == 1) {
        document.getElementById('menuPowerMaxAttitude').style.backgroundPosition='0px -35px';
        document.getElementById('menuPowerMaxAttitude').style.height = "46px";
    } else if (iMode == 2) {
        document.getElementById('menuPowerMaxAttitude').style.backgroundPosition='0px 0px';
        document.getElementById('menuPowerMaxAttitude').style.height = "35px";
    }
} else if ((sId == 'menuShippingPayment') || (sId == 'sub-menuShippingPayment' ))  {
    if (iMode == 1) {
        document.getElementById('menuShippingPayment').style.backgroundPosition='0px -35px';
        document.getElementById('menuShippingPayment').style.height = "46px";
    } else if (iMode == 2) {
        document.getElementById('menuShippingPayment').style.backgroundPosition='0px 0px';
        document.getElementById('menuShippingPayment').style.height = "35px";
    }
} 
}
</script>


</head>

<body>
<div id="header">
 <div id="nav">
   <ul id="menu">
     <li class="menu-item">
   <div id="menuAllProducts" onMouseOver="changeBackground(this, 1);" onMouseOut="changeBackground(this, 2);">  
           <a href="#">All Products</a>
       </div>
       <ul class="sub-menu" id="sub-menuAllProducts"  onMouseOver="changeBackground(this, 1);" onMouseOut="changeBackground(this, 2);">
         <li class="sub-item" onmouseover="document.getElementById('menuNewMacs').style.color= '#FFFFFF'" onmouseout="document.getElementById('menuNewMacs').style.color = '#FF8E04'">
            <a href="#" id="menuNewMacs">New Macs</a>
              <div id="third-menuNewMacs" class="third-menu">
               <div class="bkg"></div>
               <div class="arrow"><img src="images/nav/arrow_head.png" /></div>          
               <div class="newMacsOptions">
             <ul class="menuMacBookPro">
                  <li><img src="images/nav/icons/macbook_pro.png" /></li>
                  <li><a href="#">MacBook Pro: 13"</a></li>
                  <li><a href="#">MacBook Pro: 15"</a></li>
                  <li><a href="#">Macbook Pro: 17"</a></li>
                 </ul>
                 <ul class="menuMacBookAir">
                  <li><img src="images/nav/icons/macbook_air.png" /></li>
                  <li><a href="#">MacBook Air: 11"</a></li>
                  <li><a href="#">MacBook Air: 13"</a></li>
                 </ul>
                 <ul class="menuIMac">
                  <li><img src="images/nav/icons/imac.png" /></li>
                  <li><a href="#">iMac: 21.5"</a></li>
                  <li><a href="#">iMac: 27"</a></li>
                 </ul>
                 <ul class="menuMacMini">
                  <li><img src="images/nav/icons/mac_mini.png" /></li>
                  <li><a href="#">Mac mini</a></li>
                  <li><a href="#">Servers</a></li>
                 </ul>
             <ul class="menuMacPro">
                  <li><img src="images/nav/icons/mac_pro.png" /></li>
                  <li><a href="#">Mac Pro</a></li>
                 </ul>
                </div>
               </div>
              </li>
              <li class="sub-item" onmouseover="document.getElementById('menuUsedMacs').style.color= '#FFFFFF'" onmouseout="document.getElementById('menuUsedMacs').style.color = '#FF8E04'">
    <a href="#" id="menuUsedMacs">Used Macs</a>
    <div id="third-menuUsedMacs" class="third-menu">
      <div class="bkg"></div>
      <div class="arrow"><img src="images/nav/arrow_head.png" /></div>
      <ul>
        <li><h5>Desktops / Xserve</h5></li>
        <li><a href="#">Mac Pro</a></li>
        <li><a href="#">G5 Power Mac - PCI-E</a></li>
        <li><a href="#">G5 Power Mac - PCI-x</a></li>
        <li><a href="#">G5 Power Mac - PCI</a></li>
        <li><a href="#">G4 Power Mac Towers</a></li>
        <li><a href="#">Mac Mini - G4</a></li>
        <li><a href="#">XServe - Intel</a></li>
        <li><a href="#">XServe - G5</a></li>
        <li><a href="#">XServe - G4</a></li>
      </ul>
      <ul>
        <li><h5>iMacs / eMac</h5></li>
        <li><a href="#">Intel iMac: 27-inch</a></li>
        <li><a href="#">Intel iMac: 21.5-inch</a></li>
        <li><a href="#">Intel iMac: 24-inch</a></li>
        <li><a href="#">Intel iMac: 20-inch</a></li>
        <li><a href="#">Intel iMac: 17-inch</a></li>
        <li><a href="#">G5 iMac: 20-inch</a></li>
        <li><a href="#">G5 iMac: 17-inch</a></li>
        <li><a href="#">G4 iMac: 20-inch</a></li>
        <li><a href="#">G4 iMac: 17-inch</a></li>
        <li><a href="#">G4 iMac: 15-inch</a></li>
        <li><a href="#">eMac</a></li>
      </ul>
      <ul>
        <li><h5>MacBook / MacBook Pro</h5></li>
        <li><a href="#">Intel iMac: 27-inch</a></li>
        <li><a href="#">Intel iMac: 21.5-inch</a></li>
        <li><a href="#">Intel iMac: 24-inch</a></li>
        <li><a href="#">Intel iMac: 20-inch</a></li>
        <li><a href="#">Intel iMac: 17-inch</a></li>
        <li><a href="#">G5 iMac: 20-inch</a></li>
        <li><a href="#">G5 iMac: 17-inch</a></li>
        <li><a href="#">G4 iMac: 20-inch</a></li>
        <li><a href="#">G4 iMac: 17-inch</a></li>
        <li><a href="#">G4 iMac: 15-inch</a></li>
        <li><a href="#">eMac</a></li>
      </ul>
      <ul>
        <li><h5>iBook / PowerBooks</h5></li>
        <li><a href="#">Intel iMac: 27-inch</a></li>
        <li><a href="#">Intel iMac: 21.5-inch</a></li>
        <li><a href="#">Intel iMac: 24-inch</a></li>
        <li><a href="#">Intel iMac: 20-inch</a></li>
        <li><a href="#">Intel iMac: 17-inch</a></li>
        <li><a href="#">G5 iMac: 20-inch</a></li>
        <li><a href="#">G5 iMac: 17-inch</a></li>
        <li><a href="#">G4 iMac: 20-inch</a></li>
        <li><a href="#">G4 iMac: 17-inch</a></li>
        <li><a href="#">G4 iMac: 15-inch</a></li>
        <li><a href="#">eMac</a></li>
      </ul>
      <div class="clear">&nbsp;</div>
    </div>
  </li>
  <li class="sub-item" onmouseover="document.getElementById('menuSpecialValueMacs').style.color= '#FFFFFF'" onmouseout="document.getElementById('menuSpecialValueMacs').style.color = '#FF8E04'">
    <a href="#" id="menuSpecialValueMacs">Special Value Macs</a>
  </li>
  <li class="sub-item" onmouseover="document.getElementById('menuCustomMacs').style.color= '#FFFFFF'" onmouseout="document.getElementById('menuCustomMacs').style.color = '#FF8E04'">
    <a href="#" id="menuCustomMacs">Custom Macs</a>
  </li>
  <li class="sub-item" onmouseover="document.getElementById('menuiPods').style.color= '#FFFFFF'" onmouseout="document.getElementById('menuiPods').style.color = '#FF8E04'">
    <a href="#" id="menuiPods">iPods</a>
  </li>
  <li class="sub-item" onmouseover="document.getElementById('menuiPads').style.color= '#FFFFFF'" onmouseout="document.getElementById('menuiPads').style.color = '#FF8E04'">
    <a href="#" id="menuiPads">iPads</a>
  </li>
  <li class="sub-item" onmouseover="document.getElementById('menuStorage').style.color= '#FFFFFF'" onmouseout="document.getElementById('menuStorage').style.color = '#FF8E04'">
    <a href="#" id="menuStorage">Storage</a>
  </li>
  <li class="sub-item" onmouseover="document.getElementById('menuDisplays').style.color= '#FFFFFF'" onmouseout="document.getElementById('menuDisplays').style.color = '#FF8E04'">
    <a href="#" id="menuDisplays">Displays</a>
  </li>
  <li class="sub-item" onmouseover="document.getElementById('menuVideoAudio').style.color= '#FFFFFF'" onmouseout="document.getElementById('menuVideoAudio').style.color = '#FF8E04'">
    <a href="#" id="menuVideoAudio">Video+Audio</a>
  </li>
  <li class="sub-item" onmouseover="document.getElementById('menuAccessories').style.color= '#FFFFFF'" onmouseout="document.getElementById('menuAccessories').style.color = '#FF8E04'">
    <a href="#" id="menuAccessories">Accessories</a>
  </li>
  <li class="sub-item" onmouseover="document.getElementById('menuNetworking').style.color= '#FFFFFF'" onmouseout="document.getElementById('menuNetworking').style.color = '#FF8E04'">
    <a href="#" id="menuNetworking">Networking</a>
  </li>
  <li class="sub-item" onmouseover="document.getElementById('menuSoftware').style.color= '#FFFFFF'" onmouseout="document.getElementById('menuSoftware').style.color = '#FF8E04'">
    <a href="#" id="menuSoftware">Software</a>
  </li>
</ul>
</li>
<li>
<a href="#"><img src="images/nav/click_to_chat.png" /></a>
</li>
</ul>
</div>
</div>
</body>
</html>

1 Ответ

0 голосов
/ 10 февраля 2012

Я просмотрел ваш код, и очевидная причина вашей проблемы в том, что, если вы слишком быстро убираете мышь из меню, стиль наведения застревает.Я не могу придумать ничего, что можно сделать с этой первопричиной, это причуды IE7, и это так.Необходим какой-то отказоустойчивый, и для этого можно использовать javascript.Что вам нужно сделать, это установить свойство отображения CSS на block при наведении мыши и none при наведении мыши.Это гарантирует, что элементы третьего уровня будут скрыты, когда они должны быть.

Пока я разбирался с проблемой, я также реорганизовал часть HTML и большую часть CSS.Было много перекрывающихся и противоречивых стилей, и я удивляюсь, что он работал так же, как и он.

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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link href="css/test.css" rel="stylesheet" type="text/css" />
<link href="css/ie7.css" rel="stylesheet" type="text/css" />
<!-- JavaScript -->
<script type="text/javascript">
function changeBackground(oEl, iMode) {
    var sId = oEl.id;
    if (sId == null) alert("Your Element Does Not Have An ID!");

    if ((sId == 'menuAllProducts') || (sId == 'sub-menuAllProducts')) {
        if (iMode == 1) {
            document.getElementById('menuAllProducts').style.backgroundPosition='0px -35px';
            document.getElementById('menuAllProducts').style.height = "46px";
        } else if (iMode == 2) {
            document.getElementById('menuAllProducts').style.backgroundPosition='0px 0px';
            document.getElementById('menuAllProducts').style.height = "35px";
        }
    } else if ((sId == 'menuCustomerResources') || (sId == 'sub-menuCustomerResources')) {
        if (iMode == 1) {
            document.getElementById('menuCustomerResources').style.backgroundPosition='0px -35px';
            document.getElementById('menuCustomerResources').style.height = "46px";
        } else if (iMode == 2) {
            document.getElementById('menuCustomerResources').style.backgroundPosition='0px 0px';
            document.getElementById('menuCustomerResources').style.height = "35px";
        }
    } else if ((sId == 'menuPowerMaxAttitude') || (sId == 'sub-menuPowerMaxAttitude')) {
        if (iMode == 1) {
            document.getElementById('menuPowerMaxAttitude').style.backgroundPosition='0px -35px';
            document.getElementById('menuPowerMaxAttitude').style.height = "46px";
        } else if (iMode == 2) {
            document.getElementById('menuPowerMaxAttitude').style.backgroundPosition='0px 0px';
            document.getElementById('menuPowerMaxAttitude').style.height = "35px";
        }
    } else if ((sId == 'menuShippingPayment') || (sId == 'sub-menuShippingPayment')) {
        if (iMode == 1) {
            document.getElementById('menuShippingPayment').style.backgroundPosition='0px -35px';
            document.getElementById('menuShippingPayment').style.height = "46px";
        } else if (iMode == 2) {
            document.getElementById('menuShippingPayment').style.backgroundPosition='0px 0px';
            document.getElementById('menuShippingPayment').style.height = "35px";
        }
    } 
}
</script>
</head>

<body>
<div id="header">
<div id="nav">
<ul id="menu">
  <li class="menu-item" onMouseOver="changeBackground(document.getElementById('menuAllProducts'), 1);" onMouseOut="changeBackground(document.getElementById('menuAllProducts'), 2);">
    <div id="menuAllProducts">
      <a href="#">All Products</a>
    </div>
    <ul class="sub-menu" id="sub-menuAllProducts">
      <li class="sub-item" onmouseover="document.getElementById('third-menuNewMacs').style.display='block'" onmouseout="document.getElementById('third-menuNewMacs').style.display='none'">
        <a href="#">New Macs</a>
        <div id="third-menuNewMacs" class="third-menu">
          <div class="bkg"></div>
          <div class="arrow"><img src="/images/nav/arrow_head.png" /></div>
          <div class="newMacsOptions">
            <ul class="menuMacBookPro">
              <li><img src="/images/nav/icons/macbook_pro.png" /></li>
              <li><a href="#">MacBook Pro: 13"</a></li>
              <li><a href="#">MacBook Pro: 15"</a></li>
              <li><a href="#">Macbook Pro: 17"</a></li>
            </ul>
            <ul class="menuMacBookAir">
              <li><img src="/images/nav/icons/macbook_air.png" /></li>
              <li><a href="#">MacBook Air: 11"</a></li>
              <li><a href="#">MacBook Air: 13"</a></li>
            </ul>
            <ul class="menuIMac">
              <li><img src="/images/nav/icons/imac.png" /></li>
              <li><a href="#">iMac: 21.5"</a></li>
              <li><a href="#">iMac: 27"</a></li>
            </ul>
            <ul class="menuMacMini">
              <li><img src="/images/nav/icons/mac_mini.png" /></li>
              <li><a href="#">Mac mini</a></li>
              <li><a href="#">Servers</a></li>
            </ul>
            <ul class="menuMacPro">
              <li><img src="/images/nav/icons/mac_pro.png" /></li>
              <li><a href="#">Mac Pro</a></li>
            </ul>
          </div>
        </div>
      </li>
      <li class="sub-item" onmouseover="document.getElementById('third-menuUsedMacs').style.display='block'" onmouseout="document.getElementById('third-menuUsedMacs').style.display='none'">
        <a href="#">Used Macs</a>
        <div id="third-menuUsedMacs" class="third-menu">
          <div class="bkg"></div>
          <div class="arrow"><img src="/images/nav/arrow_head.png" /></div>
          <ul>
            <li><h5>Desktops / Xserve</h5></li>
            <li><a href="#">Mac Pro</a></li>
            <li><a href="#">G5 Power Mac - PCI-E</a></li>
            <li><a href="#">G5 Power Mac - PCI-x</a></li>
            <li><a href="#">G5 Power Mac - PCI</a></li>
            <li><a href="#">G4 Power Mac Towers</a></li>
            <li><a href="#">Mac Mini - G4</a></li>
            <li><a href="#">XServe - Intel</a></li>
            <li><a href="#">XServe - G5</a></li>
            <li><a href="#">XServe - G4</a></li>
          </ul>
          <ul>
            <li><h5>iMacs / eMac</h5></li>
            <li><a href="#">Intel iMac: 27-inch</a></li>
            <li><a href="#">Intel iMac: 21.5-inch</a></li>
            <li><a href="#">Intel iMac: 24-inch</a></li>
            <li><a href="#">Intel iMac: 20-inch</a></li>
            <li><a href="#">Intel iMac: 17-inch</a></li>
            <li><a href="#">G5 iMac: 20-inch</a></li>
            <li><a href="#">G5 iMac: 17-inch</a></li>
            <li><a href="#">G4 iMac: 20-inch</a></li>
            <li><a href="#">G4 iMac: 17-inch</a></li>
            <li><a href="#">G4 iMac: 15-inch</a></li>
            <li><a href="#">eMac</a></li>
          </ul>
          <ul>
            <li><h5>MacBook / MacBook Pro</h5></li>
            <li><a href="#">Intel iMac: 27-inch</a></li>
            <li><a href="#">Intel iMac: 21.5-inch</a></li>
            <li><a href="#">Intel iMac: 24-inch</a></li>
            <li><a href="#">Intel iMac: 20-inch</a></li>
            <li><a href="#">Intel iMac: 17-inch</a></li>
            <li><a href="#">G5 iMac: 20-inch</a></li>
            <li><a href="#">G5 iMac: 17-inch</a></li>
            <li><a href="#">G4 iMac: 20-inch</a></li>
            <li><a href="#">G4 iMac: 17-inch</a></li>
            <li><a href="#">G4 iMac: 15-inch</a></li>
            <li><a href="#">eMac</a></li>
          </ul>

          <ul>
            <li><h5>iBook / PowerBooks</h5></li>
            <li><a href="#">Intel iMac: 27-inch</a></li>
            <li><a href="#">Intel iMac: 21.5-inch</a></li>
            <li><a href="#">Intel iMac: 24-inch</a></li>
            <li><a href="#">Intel iMac: 20-inch</a></li>
            <li><a href="#">Intel iMac: 17-inch</a></li>
            <li><a href="#">G5 iMac: 20-inch</a></li>
            <li><a href="#">G5 iMac: 17-inch</a></li>
            <li><a href="#">G4 iMac: 20-inch</a></li>
            <li><a href="#">G4 iMac: 17-inch</a></li>
            <li><a href="#">G4 iMac: 15-inch</a></li>
            <li><a href="#">eMac</a></li>
          </ul>
          <div class="clear">&nbsp;</div>
        </div>
      </li>
      <li class="sub-item" onmouseover="" onmouseout="">
        <a href="#" id="menuSpecialValueMacs">Special Value Macs</a>
      </li>
      <li class="sub-item" onmouseover="" onmouseout="">
        <a href="#" id="menuCustomMacs">Custom Macs</a>
      </li>
      <li class="sub-item" onmouseover="" onmouseout="">
        <a href="#" id="menuiPods">iPods</a>
      </li>
      <li class="sub-item" onmouseover="" onmouseout="">
        <a href="#" id="menuiPads">iPads</a>
      </li>
      <li class="sub-item" onmouseover="" onmouseout="">
        <a href="#" id="menuStorage">Storage</a>
      </li>
      <li class="sub-item" onmouseover="" onmouseout="">
        <a href="#" id="menuDisplays">Displays</a>
      </li>
      <li class="sub-item" onmouseover="" onmouseout="">
        <a href="#" id="menuVideoAudio">Video+Audio</a>
      </li>
      <li class="sub-item" onmouseover="" onmouseout="">
        <a href="#" id="menuAccessories">Accessories</a>
      </li>
      <li class="sub-item" onmouseover="" onmouseout="">
        <a href="#" id="menuNetworking">Networking</a>
      </li>
      <li class="sub-item" onmouseover="" onmouseout="">
        <a href="#" id="menuSoftware">Software</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#"><img src="/images/nav/click_to_chat.png" /></a>
  </li>
</ul>
</div>
</div>
</body>
</html>

CSS: 

/* CSS Document */
h5 {font-family:'FranklinGothicLT-BookCnd', Arial, Helvetica, sans-serif;font-size:13px;font-weight:normal;color:#ff8e04;text-transform:uppercase;letter-spacing:-1px;margin:0; }
img{border:none;}
/* HEADER */
#header {
    position:relative;
    z-index:100;
    padding-bottom:38px;
}

/* NAVIGATION */
#nav {
    width:965px;
    position:absolute;
}
#menu {
    list-style:none;
    padding:0;
    margin:0;
}
.menu-item {
    position:relative;
    float:left;
    line-height:30px;
}
.menu-item:hover .sub-menu {
    display: block;
}
#menuAllProducts {
    position:relative;
    width:110px;
    height:35px;
    z-index:100;
    text-indent:-9000px;
    margin-right:4px;
    background:url(/images/nav/all_products.png) no-repeat;
}
.sub-menu {
    position:absolute;
    top:45px;
    left:0;
    width:199px;
    z-index:50;
    display:none;
    list-style:none;
    padding:10px 0 0;
    margin:0;
    background:#ff8e04;
    border:solid 1px #a3a3a3;
    box-shadow:3px 4px 10px -3px #555454;
}

    .sub-item {position:relative;height:26px;line-height:30px;padding-left:10px;background:url(/images/background/nav_dropdown.png) no-repeat;}
    .sub-item:hover {background:#fcba00;}
    .sub-item:hover .third-menu {display: block;}
    .sub-item a {color:#ff8e04;text-decoration:none;font-family: Arial, Helvetica, sans-serif;font-weight:bold;font-size:12px;}
    .sub-item:hover a {color:#fff;}

    .third-menu {position:absolute;top:-26px;right:-752px;width:750px;display:none;list-style:none;padding:0;margin:0;background:#f7f7f7;border:solid 1px #a3a3a3;box-shadow: 3px 4px 10px -3px #555454;}
    .third-menu ul {float:left;margin:0;padding:5px 10px;list-style:none;line-height:100%;width:160px;}
    .third-menu li {height:auto;line-height:20px;color:#595858;font-family:Arial, Helvetica, sans-serif;font-weight:bold;font-size:12px;}
    .third-menu li h5{color:#ff8e04;border-bottom:solid 1px #cbcbca;}
    .third-menu li a, 
    .third-menu li a:link, 
    .third-menu li a:active{color:#6a6a6a;text-decoration:none;font-family:Arial, Helvetica, sans-serif;font-weight:normal;font-size:11px;} 
    .third-menu li a:hover{color:#6a6a6a;text-decoration:underline;}
    .third-menu .bkg{background:#b8b7b6;height:10px;}

    #third-menuNewMacs {top:0;right:-470px; width:468px;height:151px;background:url(/images/background/nav_newmacs.png) no-repeat;}
    #third-menuNewMacs ul {float:left;margin:0;padding:0;list-style:none;line-height:100%;width:100px;}
    #third-menuNewMacs ul.menuMacMini {width:65px;}
    #third-menuNewMacs li {height:auto;line-height:20px;color:#595858;font-family:Arial, Helvetica, sans-serif;font-weight:bold;font-size:12px;text-align:center;}
    #third-menuNewMacs li a,
    #third-menuNewMacs li a:link,
    #third-menuNewMacs li a:active {color:#35cffa;text-decoration:none;font-family:Arial, Helvetica, sans-serif;font-weight:normal;font-size:11px;} 
    #third-menuNewMacs li a:hover {text-decoration:underline;}
    #third-menuNewMacs .arrow {position:absolute;top:0;left:-2px;}

    #third-menuUsedMacs {top:-26px;right:-752px;width:750px;}
    #third-menuUsedMacs .arrow {position:absolute;top:27px;left:-2px;}

    #menuCustomerResources{background:url(/images/nav/customer_resources.png) no-repeat;width:112px;height:35px;z-index:100;position:relative;text-indent:-9000px;margin-right:4px;}
    #menuPowerMaxAttitude{background:url(/images/nav/attitude_fun.png) no-repeat;width:130px;height:35px;z-index:100;position:relative;text-indent:-9000px;margin-right:4px;}
    #menuShippingPayment{background:url(/images/nav/shipping_payment.png) no-repeat;width:173px;height:35px;z-index:100;position:relative;text-indent:-9000px;margin-right:4px;}

.stretch,.clear {clear: both;height: 1px;margin: 0;padding: 0;font-size: 15px;line-height: 1px;}
...