「巨型」下拉菜單

我正在「巨型」下拉菜單上工作。然而，我需要一點小小的改變，這被證明是一項任務。「巨型」下拉菜單

要被認爲是正確的它應該看起來像下面的每個選項卡的下拉需要在同一位置顯示，因爲它們將各自包含類似信息。下拉菜單的左側應該從大圖像的左側開始。

只是要注意的是，當主選項卡盤旋所有5個分區域會顯示。這只是一個2級下拉。

它是目前在IE8，FF和Opera正確的，但錯在Chrome，IE7和IE6。這3個「錯誤」的瀏覽器都使它幾乎相同。

任何幫助將不勝感激。我非常肯定它小小的東西，我一直想念。

快速一般結構

ul#MM 
    li.mega h2 a 
    div.subMenu 
    div.mini 
    h3 
    ul.sub 
     li a

CSS

body { background:#FFFFFF; color:#343434; font-size:14px; font-family:Verdana, Geneva, sans-serif; margin:0; padding:0; } 

ul#MM { } 
ul#MM li { display: inline; position: relative; padding:0; margin:0; overflow:hidden; } 
ul#MM h2 { font-size:100%; font-weight: normal; display:inline; line-height:24px; } 
ul#MM h3 { font-size:100%; font-weight: normal; display:inline; padding:5px; margin:0; color:#fff; } 
ul#MM li a { color:#0086aa; text-decoration:none; } 
ul#MM li a:hover { text-decoration:none; } 
ul#MM li.mega a { background:transparent url(arrow.gif) center right no-repeat; padding:8px 5px; } 
ul#MM li.mega a:hover { text-decoration:none; background:url(blueTrandBG.png) repeat; color:#fff;} 
ul#MM li.mega h2 a.current { text-decoration:none; background:url(blueTrandBG.png) repeat; color:#fff; padding:8px 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; border-top-left-radius:5px; border-top-right-radius:5px; } 

ul#MM li.mega div.subMenu { display:none; position: absolute; top:25px; margin:0; padding:10px; width:960px; height:366px; background:url(blueTrandBG.png) repeat; border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px;} 

ul#MM li.mega div.subMenu div.mini { width:168px; float:left; margin:5px; position:relative; background:url(blueTrandBG_lite.png) repeat; padding:5px; border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; } 
ul#MM li.mega div.subMenu div.mini:hover { background:url(blueTrandBG.png) repeat; } 

ul#MM li.hovering div.subMenu { display:block; margin:0; } 

ul#MM li.mega div.subMenu ul.sub { background:#fff; padding:0; margin:0; display:block; border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; } 
ul#MM li.mega div.subMenu ul.sub li { border-bottom:1px solid #eaeaea; padding:0; margin:0; list-style:none; width:100%; display:block; } 
ul#MM li.mega div.subMenu ul.sub li a { display:block; background:transparent; margin:0; border:0; padding:6px; color:#221f1f; } 
ul#MM li.mega div.subMenu ul.sub li a:hover { color:#f37928; background:transparent; } 

#box { margin:0 auto; padding:0; width:960px; } 
#bigPicture { width:960px; height:351px; background-color:#000; margin-left:-7px; margin-top:20px; } 
.grayLight { color:#777; }

HTML/JS

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8" /> 
<title>Untitled Document</title> 
<link rel="stylesheet" href="css-02.css" type="text/css" media="screen" /> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script> 
<script> 
/** hoverIntent r5 // 2007.03.27 // jQuery 1.1.2+ <http://cherne.net/brian/resources/jquery.hoverIntent.html> @author Brian Cherne <[email protected]> */ 
(function($){$.fn.hoverIntent=function(f,g){var cfg={sensitivity:7,interval:100,timeout:0};cfg=$.extend(cfg,g?{over:f,out:g}:f);var cX,cY,pX,pY;var track=function(ev){cX=ev.pageX;cY=ev.pageY;};var compare=function(ev,ob){ob.hoverIntent_t=clearTimeout(ob.hoverIntent_t);if((Math.abs(pX-cX)+Math.abs(pY-cY))<cfg.sensitivity){$(ob).unbind("mousemove",track);ob.hoverIntent_s=1;return cfg.over.apply(ob,[ev]);}else{pX=cX;pY=cY;ob.hoverIntent_t=setTimeout(function(){compare(ev,ob);},cfg.interval);}};var delay=function(ev,ob){ob.hoverIntent_t=clearTimeout(ob.hoverIntent_t);ob.hoverIntent_s=0;return cfg.out.apply(ob,[ev]);};var handleHover=function(e){var p=(e.type=="mouseover"?e.fromElement:e.toElement)||e.relatedTarget;while(p&&p!=this){try{p=p.parentNode;}catch(e){p=this;}}if(p==this){return false;}var ev=jQuery.extend({},e);var ob=this;if(ob.hoverIntent_t){ob.hoverIntent_t=clearTimeout(ob.hoverIntent_t);}if(e.type=="mouseover"){pX=ev.pageX;pY=ev.pageY;$(ob).bind("mousemove",track);if(ob.hoverIntent_s!=1){ob.hoverIntent_t=setTimeout(function(){compare(ev,ob);},cfg.interval);}}else{$(ob).unbind("mousemove",track);if(ob.hoverIntent_s==1){ob.hoverIntent_t=setTimeout(function(){delay(ev,ob);},cfg.timeout);}}};return this.mouseover(handleHover).mouseout(handleHover);};})(jQuery); 
</script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
    function addMega(){ 
      $(this).children("h2").children().addClass("current"); 
      $(this).addClass("hovering"); 
      var subMenu = $(this).children("ul#MM li.hovering div.subMenu"); 
//   var pos = $(this).offset(); 
//  var width = $(this).width(); 
//   alert(pos.left); 
//   subMenu.children("ul").css({ "left": "0", "top":"50px" }); 
      subMenu.show(); 
      subMenu.css("marginLeft", "-50px"); 
     } 

    function removeMega(){ 
      $(this).children("h2").children().removeClass("current"); 
      $(this).removeClass("hovering"); 
     } 

    var megaConfig = { 
      interval: 100, 
      sensitivity: 10, 
      over: addMega, 
      timeout: 250, 
      out: removeMega 
     }; 

    $("li.mega").hoverIntent(megaConfig); 
     $("ul#MM li.mega div ul li:last-child").css("borderWidth",0); 

     if ($.browser.opera) { 
      $("ul#MM li.mega div.subMenu").css("top", "33px"); 
      $("ul#MM li.mega div.mini").css("top", "0"); 
     } 
    }); 
</script> 
<!--[if lte IE 7]> <style type="text/css">ul#MM li.mega div.subMenu { top:33px; left:0; } </style><![endif]--> 
</head> 
<body> 
<div id="box"> 
    <ul id="MM"> 
    <li> 
     <h2><a href="./">home</a></h2> 
    </li> 
    <li><span class="grayLight">|</span></li> 
    <li class="mega"> 
     <h2><a href="play.cfm">plays</a></h2> 
      <div class="subMenu"> 
      <div class="mini"> 
       <h3>play</h3> 
      <ul class="sub"> 
       <li><a href="bay_fishing.cfm">bay fishing</a></li> 
       <li><a href="deep_sea_fishing.cfm">deep sea fishing</a></li> 
       <li><a href="fly_fishing.cfm">fly fishing</a></li> 
       <li><a href="floundering.cfm">floundering</a></li> 
       <li><a href="fresh_water_fishing.cfm">fresh water fishing</a></li> 
       <li><a href="jetty_fishing.cfm">jetty fishing</a></li> 
       <li><a href="kayak_fishing.cfm">kayak fishing</a></li> 
       <li><a href="surf_fishing.cfm">surf fishing</a></li> 
       <li><a href="pier_fishing.cfm">pier fishing</a></li> 
       </ul> 
      </div> 
      <div class="mini"> 
      <h3>hiy</h3> 
       <ul class="sub"> 
       <li><a href="species.cfm">species</a></li> 
       <li><a href="bag_limits.cfm">bag limits</a></li> 
       <li><a href="photo_gallery.cfm">photo gallery</a></li> 
      </ul> 
      </div> 
      <div class="mini"> 
      <h3>hellj</h3> 
       <ul class="sub"> 
       <li><a href="when_to_come.cfm">when to come</a></li> 
       <li><a href="where_to_go.cfm">where to go</a></li> 
       <li><a href="hot_spots.cfm">hot spots</a></li> 
       <li><a href="boat_ramps_marinas.cfm">boat ramps &amp; marinas</a></li> 
       <li><a href="guides.cfm">guides</a></li> 
       <li><a href="bait_shops.cfm">bait shops</a></li> 
       <li><a href="what_to_bring.cfm">what to bring</a></li> 
       <li><a href="boater_s_checklist.cfm">boater's checklist</a></li> 
       </ul> 
      </div> 
      <div class="mini"> 
      <h3>there</h3> 
       <ul class="sub"> 
       <li><a href="seagrass_protection.cfm">seagrass protection</a></li> 
       </ul> 
      </div> 
      <div class="mini"> 
      <h3>wow</h3> 
       <ul class="sub"> 
       <li><a href="round_the_bend.cfm">round the bend</a></li> 
       </ul> 
      </div> 
      </div> 
    </li> 
    <li><span class="grayLight">|</span></li> 
    <li class="mega"> 
     <h2><a href="learn.cfm">learn</a></h2> 
      <div class="subMenu"> 
      <div class="mini"> 
       <h3>play</h3> 
      <ul class="sub"> 
       <li><a href="bay_fishing.cfm">bay fishing</a></li> 
       <li><a href="deep_sea_fishing.cfm">deep sea fishing</a></li> 
       <li><a href="fly_fishing.cfm">fly fishing</a></li> 
       <li><a href="floundering.cfm">floundering</a></li> 
       <li><a href="fresh_water_fishing.cfm">fresh water fishing</a></li> 
       <li><a href="jetty_fishing.cfm">jetty fishing</a></li> 
       <li><a href="kayak_fishing.cfm">kayak fishing</a></li> 
       <li><a href="surf_fishing.cfm">surf fishing</a></li> 
       <li><a href="pier_fishing.cfm">pier fishing</a></li> 
       </ul> 
      </div> 
      <div class="mini"> 
      <h3>hiy</h3> 
       <ul class="sub"> 
       <li><a href="species.cfm">species</a></li> 
       <li><a href="bag_limits.cfm">bag limits</a></li> 
       <li><a href="photo_gallery.cfm">photo gallery</a></li> 
      </ul> 
      </div> 
      <div class="mini"> 
      <h3>hellj</h3> 
       <ul class="sub"> 
       <li><a href="when_to_come.cfm">when to come</a></li> 
       <li><a href="where_to_go.cfm">where to go</a></li> 
       <li><a href="hot_spots.cfm">hot spots</a></li> 
       <li><a href="boat_ramps_marinas.cfm">boat ramps &amp; marinas</a></li> 
       <li><a href="guides.cfm">guides</a></li> 
       <li><a href="bait_shops.cfm">bait shops</a></li> 
       <li><a href="what_to_bring.cfm">what to bring</a></li> 
       <li><a href="boater_s_checklist.cfm">boater's checklist</a></li> 
       </ul> 
      </div> 
      <div class="mini"> 
      <h3>there</h3> 
       <ul class="sub"> 
       <li><a href="seagrass_protection.cfm">seagrass protection</a></li> 
       </ul> 
      </div> 
      <div class="mini"> 
      <h3>wow</h3> 
       <ul class="sub"> 
       <li><a href="round_the_bend.cfm">round the bend</a></li> 
       </ul> 
      </div> 
      </div> 
    </li> 
    <li><span class="grayLight">|</span></li> 
    <li> 
     <h2><a href="plan.cfm">plan</a></h2> 
    </li> 
    <li><span class="grayLight">|</span></li> 
    <li class="mega"> 
     <h2><a href="conserve.cfm">conserve</a></h2> 
      <div class="subMenu"> 
      <div class="mini"> 
       <h3>play</h3> 
      <ul class="sub"> 
       <li><a href="bay_fishing.cfm">bay fishing</a></li> 
       <li><a href="deep_sea_fishing.cfm">deep sea fishing</a></li> 
       <li><a href="fly_fishing.cfm">fly fishing</a></li> 
       <li><a href="floundering.cfm">floundering</a></li> 
       <li><a href="fresh_water_fishing.cfm">fresh water fishing</a></li> 
       <li><a href="jetty_fishing.cfm">jetty fishing</a></li> 
       <li><a href="kayak_fishing.cfm">kayak fishing</a></li> 
       <li><a href="surf_fishing.cfm">surf fishing</a></li> 
       <li><a href="pier_fishing.cfm">pier fishing</a></li> 
       </ul> 
      </div> 
      <div class="mini"> 
      <h3>hiy</h3> 
       <ul class="sub"> 
       <li><a href="species.cfm">species</a></li> 
       <li><a href="bag_limits.cfm">bag limits</a></li> 
       <li><a href="photo_gallery.cfm">photo gallery</a></li> 
      </ul> 
      </div> 
      <div class="mini"> 
      <h3>hellj</h3> 
       <ul class="sub"> 
       <li><a href="when_to_come.cfm">when to come</a></li> 
       <li><a href="where_to_go.cfm">where to go</a></li> 
       <li><a href="hot_spots.cfm">hot spots</a></li> 
       <li><a href="boat_ramps_marinas.cfm">boat ramps &amp; marinas</a></li> 
       <li><a href="guides.cfm">guides</a></li> 
       <li><a href="bait_shops.cfm">bait shops</a></li> 
       <li><a href="what_to_bring.cfm">what to bring</a></li> 
       <li><a href="boater_s_checklist.cfm">boater's checklist</a></li> 
       </ul> 
      </div> 
      <div class="mini"> 
      <h3>there</h3> 
       <ul class="sub"> 
       <li><a href="seagrass_protection.cfm">seagrass protection</a></li> 
       </ul> 
      </div> 
      <div class="mini"> 
      <h3>wow</h3> 
       <ul class="sub"> 
       <li><a href="round_the_bend.cfm">round the bend</a></li> 
       </ul> 
      </div> 
      </div> 
    </li> 
    <li><span class="grayLight">|</span></li> 
    <li> 
     <h2><a href="learn.cfm">learn</a></h2> 
    </li> 
    <li><span class="grayLight">|</span></li> 
    <li> 
     <h2><a href="plan.cfm">plan</a></h2> 
    </li> 
    <li><span class="grayLight">|</span></li> 
    <li> 
     <h2><a href="stay.cfm">stay</a></h2> 
    </li> 
    </ul> 
    <div id="bigPicture" style="background-image:url(http://www.visitcorpuschristitx.org/birding/images/bigimage5.jpg)"> 
    <div id="megaMenu"></div> 
    </div> 
</div> 
</body> 
</html>

來源

2009-12-22 corymathews

這真的是一個五級子菜單導航？如果是的話，請在你落後的時候停下來。我知道這實際上是拖釣，但5級是瘋狂的人。用戶體驗很糟糕。如果不是5級，我表示歉意。 – 2009-12-22 15:38:38

其只有2級。 5級會瘋狂大聲笑。第二級有5個迷你部分，但其全部1級沒有額外的懸停或點擊需要。 – corymathews 2009-12-22 15:41:39

已經嘗試過boostrap和meta？ – 2014-11-11 16:39:54

這裏有太多的問題需要提供一個答案，所有瀏覽器的解決方案。

然而，關鍵看你的下拉菜單的佈局問題是下拉DIV的父元素相對定位。這是當前的LI元素，爲了達到你想要的佈局，它應該是UL元素。因此，對於Safari瀏覽器（可能其他的Webkit瀏覽器）解決方案的啓動將是這樣的：

從的Javascript刪除此行：

subMenu.css("marginLeft", "-50px");
添加/更改這些CSS聲明：

ul#MM { position: relative; }

ul#MM li.mega { position: static; }

ul#MM li.mega div.subMenu { left: 0; top: 2em; }

來源

2009-12-22 17:07:46

謝謝richard，它工作得很好。在仔細研究你的答案之後，我應該回頭閱讀position的描述：absolute。「生成一個絕對定位的元素，相對於具有非靜態位置的第一個父元素進行定位，元素的位置用」左「，」頂「，」右「和」底部「屬性」http：/ /www.w3schools.com/Css/pr_class_position.asp – corymathews 2009-12-22 17:32:30

這是一個骯髒的黑客，但你可以硬編碼left屬性每個div.submenu。

將各彈出式菜單的父元素的ID，然後在IE條件式，設定第一彈出#flyout1 div.submenu是left:-50px;第二至left:-90px;等

不確定如何在Safari解決這個/ Chrome，對不起。

來源

2009-12-22 16:05:48 ndorfin

我正在考慮這樣做，但我希望避免它。 – corymathews 2009-12-22 16:09:07

「巨​​型」下拉菜單

回答

相關問題

「巨型」下拉菜單