jquery - CSS 菜单和 JQuery

Question

这是我第一次在论坛发帖。请在必要时指导我

我正在尝试为基本网页编辑(使用 Wordpress)设置一个模板，但在使用菜单时遇到了很多麻烦。网站在这里:http://munchkingraphicdesign-uat.com/devsite/

我最终成功设置了一个纯 CSS 菜单(3 级)，虽然我无法控制 float (子菜单总是垂直 float ，但无论我如何更改，我都无法让它们水平 float )，但它似乎工作正常).在有人问我为什么要这样做之前，我是为了测试我自己和代码，看看它是否设置正确。没有完全做到这一点。

然后我忽略了这个并继续查看是否可以通过 jQuery 添加一些效果。我正确地初始化了 jQuery 并添加了一些我认为会给我滑动下拉菜单的代码。

在 Chrome 中似乎没问题 - 但第 3 级不会滑动，因此我认为会退回到 CSS。在 Internet Explorer 8 中，当我移动到第 2 级下拉和第 3 级从零高度到全高度上下弹跳时出现闪烁。

我什至无法在我的本地站点上复制它。它在那里根本不起作用。

有哪位好心人可以指点一下吗？也许我想在会走之前先跑，但我担心我什至没有正确掌握 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-->