CSS菜單和jQuery

Question

這是我第一次在論壇發帖。在必要時指導我

我試圖設置基本網頁編輯（使用Wordpress）的模板，並且菜單有很多麻煩。該網站是這樣的：http://munchkingraphicdesign-uat.com/devsite/

我設法最終建立了一個CSS菜單（3級）似乎工作正常，但我沒有控制浮動（子菜單總是垂直漂浮，無論我改變了我無法讓他們水平漂浮）。在任何人問我爲什麼要這麼做的時候 - 就是測試自己和代碼，看看它是否設置正確。沒有完全做到這一點。

然後我忽略了這一點，並按下看看我是否可以通過jQuery添加一些效果。我正確初始化了jQuery並添加了一些我認爲會讓我滑落的代碼。

在Chrome中似乎沒問題 - 但第三層不會滑動，因此我認爲CSS會回落。在Internet Explorer 8中，當我移動到第二級下拉菜單並且第三級從零高度到滿時上下跳動時，會出現閃爍。

我似乎甚至不能在我的本地站點上覆制此內容。它根本不起作用。

任何一種靈魂都可以給我指點嗎？也許我在走路之前就試圖跑步，但是我擔心我甚至沒有通過CSS代碼獲得正確的基礎知識。

道歉，但有一點註釋掉的代碼也正在努力學習，因爲我去。那些_NULL後面有這個添加到讓jquery工作，因爲_NULL意味着html不再引用它們。

這段代碼怎麼會更好，我怎樣才能得到良好的下拉使用jQuery三個級別？

非常感謝

下面是jQuery的，但CSS也是至關重要的，以得到正確的

<script type="text/javascript"> 
    jQuery(document).ready(function($) {/*normally loads in noconflickmode, so have to use this line to be able to use the $ sign*/ 
     ($("#menubar ul li").hover(function(){ 
      $(this).addClass("hover"); 
      $('ul:first',this).slideDown(400); 
     }, 
     function(){ 
      $(this).removeClass("hover"); 
      $('ul:first',this).slideUp(400); 
     }); 
     $("#menubar ul li ul li:has(ul)").find("a:first").append(" &raquo; "); 
    }); 
</script> 

所以CSS是

#menubar-outer { /*container box with no colour. Used to position inner div*/ 
    background-color: #D5CBA7; 
    position: relative;/*Needs to be explicitly set for z-index*/ 
    z-index: 50;/*Needed for IE7*/ 
    width: 100%; 
    margin: 0 0 0px 0;/*Use lower margin for lower line tab effect. Use a negative offset on left to align*/ 
    padding: 0; 
    text-align: left;/*CONTROLS overall position of menu. Right, left or center*/ 
    /*border-bottom: 1px solid #c0c0c0;*/ 
} 
#menubar { /*inner container box..Sets space and fonts*/ 
    /*background-color:blue;*/ 
    display: inline-block; 
    position: relative; 
    z-index: 50; 
    margin: 0 0 0px 0px;/*for space around the menu first row*/ 
    padding: 0; 
    font-size: 1em; 
    text-transform: uppercase; 
    vertical-align: bottom;/*needed to remove automatic inline-block additional 5px margin*/ /*border: 1px solid black;*/ 
} 
#menubar a {/*The element containing the words*/ 
    /*background-color: #dbdbdb; *//*color of main menu*/ 
    display: block; /*using block rather than inline makes entire block, not just the text clickable*/ 
    /*height: 15px;*//*CONTROLS height of menu item on first row together with "li li a" which controls for subsequent rows*/ 
    padding: 10px 15px; /*space around the menu items*/ 
    line-height: 15px;/*spacing between lines on same menu item*/ 
    text-align: left;/*CONTROLS centred menu items or left/right aligned. "a" element used rather than li which doesn't work in IE7. Affects drop downs so important*/ 
} 

#menubar li li a { /*Second and third level rows. */ 
    /*height: 30px;*/ /*Needed for styling different height on first row*/ 
    /*padding: 7px 6px;*//*Needed for styling different padding than first row*/ 
    /*background-color: #D5CBA7;*//*CONTROLS filled background color for dropdowns. Important because above active page highlights will override otherwise*/ 
} 
#menubar li:first-child { 
    border-left: none;/*accompanies divider&box line aboves. Use "none" if you are using seperators and add in e.g. "1px solid #c0c0c0"" if borders*/ 
} 
#menubar li { /* fixes dimensions of all level menu elements. Turns menu into horizontal*/ 
    float: left;/*makes the menu horizontal. Needed above in "a" for ie6 but causes compatibility probs*/ 
    position: relative;/*need this to ensure that the following div can be absolutely positioned*/ /*width: 130px;*/ /*CONTROLS first row menu item spacing. Width needed for li rather than "a" to work in ie7*/ 
    margin: 0 0px 0 0;/*THIS creates gaps between items*/ 
    /*border-top: 1px solid #c0c0c0; 
    border-right: 1px solid #c0c0c0; 
    border-bottom: 1px solid #c0c0c0;/*Use border top right and bottom only if you want surrounding boxes*/ 
    border-left: 2px solid #ffffff;/*Use by itself if you want dividers, together with above if seperated boxes or"none" for joined boxes (each box uses the folowing box's right border except the first child)*/ 
    /*border-radius: 4px 4px 0px 0px; 
    -moz-border-radius: 4px 4px 0px 0px; 
    -khtml-border-radius: 4px 4px 0px 0px; 
    -webkit-border-radius: 4px 4px 0px 0px;*/ 
} 
#menubar li:last-child { 
    border-right: 2px solid #ffffff;/*accompanies divider&box line aboves. Use "none" if you are using seperators and add in e.g. "1px solid #c0c0c0"" if borders*/ 
} 
#menubar ul ul li:last-child { 
    border-right: 2px solid #ffffff;/*accompanies divider&box line aboves. Use "none" if you are using seperators and add in e.g. "1px solid #c0c0c0"" if borders*/ 
} 
#menubar ul ul li:first-child { 
    border-top: 2px solid #ffffff;/*If boxes used on dropdown. Used to override border-top none below "li li"*/ 
    border-left: 2px solid #ffffff;/*If boxes used on dropdown. Use to override "li:first-child" on the previous level dropdown*/ 
} 
#menubar ul ul li {/*Dropdown items*/ 
    background-color: #D5CBA7;/*KEEP as background color needed fir IE6 to select over another div*/ 
    left: -2px;/*CONTROLS for border. 0 if no border. -1px if border is 1px. Adjust together with "li" above, "li:first-child" above, "border" below on this ID and "top" and "left" on "ul ul li:hover ul"*/ 
    width: 130px;/*needed to make the whole line selectable*/ 
    margin: 0;/*Needed to reset dropdowns if margin used on first level*/ 
    border-top: none; 
    border-right: 2px solid #ffffff; 
    border-bottom: 2px solid #ffffff; 
    border-left: 2px solid #ffffff;/*Use border right, bottom and left only if you want surrounding boxes. Also adjust "left" in this same ID (border top is "none")*/ /*border-left: none;/*Use "border-left:none" only if you want dividers and for them to be removed on every sublevel*/ 
    /*border-radius: 0px 0px 0px 0px; 
    -moz-border-radius: 0px 0px 0px 0px; 
    -khtml-border-radius: 0px 0px 0px 0px; 
    -webkit-border-radius: 0px 0px 0px 0px;*/ 
} 
#menubar ul ul, #menubar ul li:hover ul ul { /* Hide all the dropdowns (submenus) */ 
    display: none; 
    /*visibility:hidden;*/ 
    position: absolute;/*absolute means that it is absolutely positioned to the 'relative' div before it*/ 
    left: 0px;/*needed for IE7*/ 
    z-index: 60;/*for hovering over itself*/ 
    width: 130px; /*CONTROLS width of colored background in dropdown levels. Needed to float left*/ 
} 
#menubar ul li:hover ul_NULL {/*Second level submenus. Container box that the li's sit within and on top of. Displays when li are hovered on*/ 
    /*background-color:red;*/ 
    display: block; 
} 
#menubar ul ul li:hover ul {/*third level submenus. Container box that the li's sit within and on top of. Displays when li are hovered on*/ 
    /*background-color:red;*/ 
    display:block; 
    position: absolute;/*absolute means that it is absolutely positioned to the 'relative' div before it*/ 
    top: -2px; /*CONTROLS for border. 0 positions at the top with no border or -1 for border*/ 
    left: 132px;/*CONTROLS width. Match to "li" if width given + BORDER + 1 BORDER. 100% positions 1 col over to right, incl margin.*/ 
    z-index: 60;/*for hovering over itself*/ 
    width: 130px; /*CONTROLS width of colored background in dropdown levels. Needed to float left*/ 
} 
#menubar ul ul li:hover ul_NULL {/*third level submenus. Container box that the li's sit within and on top of. Displays when li are hovered on*/ 
    /*background-color:red;*/ 
    display: block; 
} 

終於HTML

<div id="menubar-outer"> 
    <span id="menubar" class="linkclass-mainmenu"> 
     <!--span needs to be used for ie7 to be able to use text-align on variable width--> 
     <div class="menu"> 
      <ul> 
       <li class="page_item page-item-21"> 
        <a href="http://munchkingraphicdesign-uat.com/devsite/adventures-of-huckleberry-finn/"> 
         Adventures of Huckleberry Finn 
        </a> 
        <ul class='children'> 
         <li class="page_item page-item-23"> 
          <a href="http://munchkingraphicdesign-uat.com/devsite/adventures-of-huckleberry-finn/conflict-between-civilization-and-natural-life/"> 
           Conflict between civilization and natural life 
          </a> 
          <ul class='children'> 
           <li class="page_item page-item-22"> 
            <a href="http://munchkingraphicdesign-uat.com/devsite/adventures-of-huckleberry-finn/conflict-between-civilization-and-natural-life/the-adventures-of-tom-sawyer/"> 
             The Adventures of Tom Sawyer 
            </a> 
           </li> 
          </ul> 
         </li> 
         <li class="page_item page-item-24"> 
          <a href="http://munchkingraphicdesign-uat.com/devsite/adventures-of-huckleberry-finn/intellectual-and-moral-education/"> 
           Intellectual and Moral Education 
          </a> 
         </li> 
        </ul> 
       </li> 
       <li class="page_item page-item-31"> 
        <a href="http://munchkingraphicdesign-uat.com/devsite/contact-us/"> 
         Contact Us 
        </a> 
       </li> 
       <li class="page_item page-item-9"> 
        <a href="http://munchkingraphicdesign-uat.com/devsite/duke-and-the-king/"> 
         Duke and the King 
        </a> 
        <ul class='children'><li class="page_item page-item-10"> 
        <a href="http://munchkingraphicdesign-uat.com/devsite/duke-and-the-king/conflict-between-civilization-and-natural-life/"> 
         Conflict between civilization and natural life 
        </a> 
        </li> 
         <li class="page_item page-item-12"> 
          <a href="http://munchkingraphicdesign-uat.com/devsite/duke-and-the-king/parodies-of-popular-romance-novels/"> 
           Parodies of Popular Romance Novels 
          </a> 
         </li> 
         <li class="page_item page-item-11"> 
          <a href="http://munchkingraphicdesign-uat.com/devsite/duke-and-the-king/the-hypocrisy-of-civilized-society/"> 
           The Hypocrisy of Civilized Society 
          </a> 
         </li> 
        </ul> 
       </li> 
       <li class="page_item page-item-17"> 
        <a href="http://munchkingraphicdesign-uat.com/devsite/jims-escape/"> 
         Jim&#8217;s escape 
        </a> 
        <ul class='children'> 
         <li class="page_item page-item-18"> 
          <a href="http://munchkingraphicdesign-uat.com/devsite/jims-escape/childhood/"> 
           Childhood 
          </a> 
         </li> 
         <li class="page_item page-item-19"> 
          <a href="http://munchkingraphicdesign-uat.com/devsite/jims-escape/conflict-between-civilization-and-natural-life/"> 
           Conflict between civilization and natural life 
          </a> 
         </li> 
         <li class="page_item page-item-20"> 
          <a href="http://munchkingraphicdesign-uat.com/devsite/jims-escape/reception/"> 
           Reception 
          </a> 
         </li> 
        </ul> 
       </li> 
       <li class="page_item page-item-5"> 
        <a href="http://munchkingraphicdesign-uat.com/devsite/mockery-of-religion/"> 
         Mockery of Religion 
        </a> 
        <ul class='children'> 
         <li class="page_item page-item-8"> 
          <a href="http://munchkingraphicdesign-uat.com/devsite/mockery-of-religion/duke-and-the-king/"> 
           Duke and the King 
          </a> 
         </li> 
         <li class="page_item page-item-6"> 
          <a href="http://munchkingraphicdesign-uat.com/devsite/mockery-of-religion/jims-escape/"> 
           Jim&#8217;s escape 
          </a> 
         </li> 
         <li class="page_item page-item-7"> 
          <a href="http://munchkingraphicdesign-uat.com/devsite/mockery-of-religion/life-in-st-petersburg/"> 
           Life in St. Petersburg 
          </a> 
         </li> 
        </ul> 
       </li> 
      </ul> 
     </div> 
    </span><!-- end #menubar --> 
    <div class="clearfix"> 

    </div><!--Used when floating. Clearfix comes before closing div of non-floated element--> 
</div><!--end #menubar-outer--> 

jsFiddle

Answer 1

這是您的菜單的modified jsFiddle - 在CSS中使用3級下拉菜單。

我已經在Chrome，Firefox & IE中測試過它，它工作正常。

希望它可以幫助你。下面的代碼是...

CSS

#menubar-outer { 
    background-color: #D5CBA7; 
    width: 100%; 
    margin: 0; 
    padding: 0; 
    text-align: left; 
} 
#menubar { 
    display: inline-block; 
    position: relative; 
    z-index: 50; 
    margin: 0; 
    padding: 0; 
    font-size: 1em; 
    text-transform: uppercase; 
    vertical-align: bottom; 
} 
#nav { 
    margin: 0 auto; 
    padding: 7px 6px 0; 
    line-height: 100%; 
} 
#nav li { 
    margin: 0 5px; 
    padding: 0 0 8px; 
    float: left; 
    position: relative; 
    list-style: none; 
} 

/* main level link */ 
#nav a { 
    font-weight: bold; 
    color: #000; 
    text-decoration: none; 
    display: block; 
    padding: 8px 20px; 
    margin: 0; 
} 

/* main level link hover */ 
#nav .current a, #nav li:hover > a { 
    background: #D5CBA7; 
    color: #000; 
} 

/* sub levels link hover */ 
#nav li a { 
    background: #D5CBA7; 
    border: none; 
} 

#nav li a:hover { 
    color: #fff; 
    background: #AE953C; 
} 

/* dropdown */ 
#nav li:hover > ul { 
    display: block; 
} 

/* level 2 list */ 
#nav ul { 
    display: none; 
    margin: 0; 
    padding: 0; 
    width: 185px; 
    position: absolute; 
} 
#nav ul li { 
    float: none; 
    margin: 0; 
    padding: 0; 
} 

#nav ul a { 
    font-weight: normal; 
    font-color: #000; 
} 

/* level 3+ list */ 
#nav ul ul { 
    left: 181px; 
    top: -3px; 
} 

#nav { 
    display: inline-block; 
} 

HTML

<div id="menubar-outer"> 
    <span id="menubar" class="linkclass-mainmenu"> 
     <!--span needs to be used for ie7 to be able to use text-align on variable width--> 
     <div class="menu"> 
      <ul id="nav"> 
      <li class="current"><a href="http://www.webdesignerwall.com">Home</a></li> 
      <li><a href="http://www.ndesign-studio.com">My Projects</a> 
       <ul> 
        <li><a href="http://www.ndesign-studio.com">N.Design Studio</a> 
         <ul> 
          <li><a href="http://www.ndesign-studio.com/portfolio">Portfolio</a></li> 
          <li><a href="http://www.ndesign-studio.com/wp-themes">WordPress Themes</a></li> 
          <li><a href="http://www.ndesign-studio.com/wallpapers">Wallpapers</a></li> 
          <li><a href="http://www.ndesign-studio.com/tutorials">Illustrator Tutorials</a></li> 
         </ul> 
        </li> 
        <li><a href="http://www.webdesignerwall.com">Web Designer Wall</a> 
         <ul> 
          <li><a href="http://jobs.webdesignerwall.com">Design Job Wall</a></li> 
         </ul> 
        </li> 
        <li><a href="http://icondock.com">IconDock</a></li> 
        <li><a href="http://bestwebgallery.com">Best Web Gallery</a></li> 
       </ul> 
      </li> 
      <li><a href="#">Multi-Levels</a> 
       <ul> 
        <li><a href="#">Team</a> 
         <ul> 
          <li><a href="#">Sub-Level Item</a></li> 
          <li><a href="#">Sub-Level Item</a> 
           <ul> 
            <li><a href="#">Sub-Level Item</a></li> 
            <li><a href="#">Sub-Level Item</a></li> 
            <li><a href="#">Sub-Level Item</a></li> 
           </ul> 
          </li> 

          <li><a href="#">Sub-Level Item</a></li> 
         </ul> 
        </li> 
        <li><a href="#">Sales</a></li> 
        <li><a href="#">Another Link</a></li> 
        <li><a href="#">Department</a> 
         <ul> 
          <li><a href="#">Sub-Level Item</a></li> 
          <li><a href="#">Sub-Level Item</a></li> 
          <li><a href="#">Sub-Level Item</a></li> 
         </ul> 
        </li> 
       </ul> 
      </li> 
      <li><a href="#">About</a></li> 
      <li><a href="#">Contact Us</a></li> 
      </ul> 
     </div> 
    </span><!-- end #menubar --> 
    <div class="clearfix"> 

    </div><!--Used when floating. Clearfix comes before closing div of non-floated element--> 
</div><!--end #menubar-outer-->