Question

我正在尝试将tutorial上找到的菜单添加到我的网站。出于某种原因，尽管控制台没有错误，但我无法看到菜单。我确实得到了菜单在页面一角有一些蓝色模糊，但是没有出现单词和条形图 - 它看起来像这样： Site with the blurr on top.

像建议的评论一样更改Z索引后，我得到以下菜单，看起来很奇怪 - 没有像教程那样。 Weird menu

我的代码：

<html>

<head>
<meta charset='utf-8'>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
    (function($) {

        $.fn.menumaker = function(options) {

            var cssmenu = $(this),
                settings = $.extend({
                    title: "Menu",
                    format: "dropdown",
                    breakpoint: 768,
                    sticky: false
                }, options);

            return this.each(function() {
                cssmenu.find('li ul').parent().addClass('has-sub');
                if (settings.format != 'select') {
                    cssmenu.prepend('<div id="menu-button">' + settings.title + '</div>');
                    $(this).find("#menu-button").on('click', function() {
                        $(this).toggleClass('menu-opened');
                        var mainmenu = $(this).next('ul');
                        if (mainmenu.hasClass('open')) {
                            mainmenu.hide().removeClass('open');
                        } else {
                            mainmenu.show().addClass('open');
                            if (settings.format === "dropdown") {
                                mainmenu.find('ul').show();
                            }
                        }
                    });

                    multiTg = function() {
                        cssmenu.find(".has-sub").prepend('<span class="submenu-button"></span>');
                        cssmenu.find('.submenu-button').on('click', function() {
                            $(this).toggleClass('submenu-opened');
                            if ($(this).siblings('ul').hasClass('open')) {
                                $(this).siblings('ul').removeClass('open').hide();
                            } else {
                                $(this).siblings('ul').addClass('open').show();
                            }
                        });
                    };

                    if (settings.format === 'multitoggle') multiTg();
                    else cssmenu.addClass('dropdown');
                } else if (settings.format === 'select') {
                    cssmenu.append('<select style="width: 100%"/>').addClass('select-list');
                    var selectList = cssmenu.find('select');
                    selectList.append('<option>' + settings.title + '</option>', {
                        "selected": "selected",
                        "value": ""
                    });
                    cssmenu.find('a').each(function() {
                        var element = $(this),
                            indentation = "";
                        for (i = 1; i < element.parents('ul').length; i++) {
                            indentation += '-';
                        }
                        selectList.append('<option value="' + $(this).attr('href') + '">' + indentation + element.text() + '</option');
                    });
                    selectList.on('change', function() {
                        window.location = $(this).find("option:selected").val();
                    });
                }

                if (settings.sticky === true) cssmenu.css('position', 'fixed');

                resizeFix = function() {
                    if ($(window).width() > settings.breakpoint) {
                        cssmenu.find('ul').show();
                        cssmenu.removeClass('small-screen');
                        if (settings.format === 'select') {
                            cssmenu.find('select').hide();
                        } else {
                            cssmenu.find("#menu-button").removeClass("menu-opened");
                        }
                    }

                    if ($(window).width() <= settings.breakpoint && !cssmenu.hasClass("small-screen")) {
                        cssmenu.find('ul').hide().removeClass('open');
                        cssmenu.addClass('small-screen');
                        if (settings.format === 'select') {
                            cssmenu.find('select').show();
                        }
                    }
                };
                resizeFix();
                return $(window).on('resize', resizeFix);

            });
        };
    })(jQuery);

    (function($) {
        $(document).ready(function() {

            $(document).ready(function() {
                $("#cssmenu").menumaker({
                    title: "Menu",
                    format: "dropdown"
                });

                $("#cssmenu a").each(function() {
                    var linkTitle = $(this).text();
                    $(this).attr('data-title', linkTitle);
                });
            });

        });
    })(jQuery);
</script>
<style type="text/css">
    @import url(http://fonts.googleapis.com/css?family=Raleway);
    #cssmenu,
    #cssmenu ul,
    #cssmenu ul li,
    #cssmenu ul li a,
    #cssmenu #menu-button {
        margin: 0;
        padding: 0;
        border: 0;
        list-style: none;
        line-height: 1;
        display: block;
        position: relative;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    #cssmenu:after,
    #cssmenu > ul:after {
        content: ".";
        display: block;
        clear: both;
        visibility: hidden;
        line-height: 0;
        height: 0;
    }

    #cssmenu #menu-button {
        display: none;
    }

    #cssmenu {
        width: auto;
        font-family: Raleway, sans-serif;
        line-height: 1;
    }

    #cssmenu > ul {
        background: #3db2e1;
    }

    #cssmenu > ul > li {
        float: left;
        -webkit-perspective: 1000px;
        -moz-perspective: 1000px;
        perspective: 1000px;
    }

    #cssmenu.align-center > ul {
        font-size: 0;
        text-align: center;
    }

    #cssmenu.align-center > ul > li {
        display: inline-block;
        float: none;
    }

    #cssmenu.align-right > ul > li {
        float: right;
    }

    #cssmenu > ul > li > a {
        padding: 16px 20px;
        font-size: 14px;
        color: #ffffff;
        letter-spacing: 1px;
        text-transform: uppercase;
        text-decoration: none;
        background: #3db2e1;
        -webkit-transition: all .3s;
        -moz-transition: all .3s;
        -o-transition: all .3s;
        transition: all .3s;
        -webkit-transform-origin: 50% 0;
        -moz-transform-origin: 50% 0;
        transform-origin: 50% 0;
        -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        transform-style: preserve-3d;
    }

    #cssmenu > ul > li.active > a {
        color: #dff2fa;
    }

    #cssmenu > ul > li:hover > a,
    #cssmenu > ul > li > a:hover {
        color: #dff2fa;
        -webkit-transform: rotateX(90deg) translateY(-23px);
        -moz-transform: rotateX(90deg) translateY(-23px);
        transform: rotateX(90deg) translateY(-23px);
        -ms-transform: none;
    }

    #cssmenu > ul > li > a::before {
        position: absolute;
        top: 100%;
        left: 0;
        z-index: -1;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        padding: 16px 20px;
        color: #dff2fa;
        background: #19799f;
        content: attr(data-title);
        -webkit-transition: background 0.3s;
        -moz-transition: background 0.3s;
        transition: background 0.3s;
        -webkit-transform: rotateX(-90deg);
        -moz-transform: rotateX(-90deg);
        transform: rotateX(-90deg);
        -webkit-transform-origin: 50% 0;
        -moz-transform-origin: 50% 0;
        transform-origin: 50% 0;
        -ms-transform: translateY(- -18px);
    }

    #cssmenu > ul > li:hover > a::before,
    #cssmenu > ul > li > a:hover::before {
        background: #3db2e1;
    }

    #cssmenu.small-screen {
        width: 100%;
    }

    #cssmenu.small-screen > ul,
    #cssmenu.small-screen.align-center > ul {
        width: 100%;
        text-align: left;
    }

    #cssmenu.small-screen > ul > li,
    #cssmenu.small-screen.align-center {
        float: none;
        display: block;
        border-top: 1px solid rgba(100, 100, 100, 0.1);
    }
    #cssmenu.small-screen > ul > li:hover > a,
    #cssmenu.small-screen > ul > li > a:hover {
        color: #dff2fa;
        -webkit-transform: none;
        -moz-transform: none;
        transform: none;
        -ms-transform: none;
    }

    #cssmenu.small-screen > ul > li > a::before {
        display: none;
    }

    #cssmenu.small-screen #menu-button {
        display: block;
        padding: 16px 20px;
        cursor: pointer;
        font-size: 14px;
        text-decoration: none;
        color: #ffffff;
        text-transform: uppercase;
        letter-spacing: 1px;
        background: #3db2e1;
    }

    #cssmenu.small-screen #menu-button:after {
        content: "";
        position: absolute;
        right: 20px;
        top: 17px;
        display: block;
        -webkit-box-sizing: content-box;
        -moz-box-sizing: content-box;
        box-sizing: content-box;
        border-top: 2px solid #ffffff;
        border-bottom: 2px solid #ffffff;
        width: 22px;
        height: 3px;
    }

    #cssmenu.small-screen #menu-button.menu-opened:after {
        border-top: 2px solid #dff2fa;
        border-bottom: 2px solid #dff2fa;
    }

    #cssmenu.small-screen #menu-button:before {
        content: "";
        position: absolute;
        right: 20px;
        top: 27px;
        display: block;
        width: 22px;
        height: 2px;
        background: #ffffff;
    }

    #cssmenu.small-screen #menu-button.menu-opened:before {
        background: #dff2fa;
    }

    @font-face {
        font-family: 'Oregon';
        src: url('OregonFont/Oregon LDO Medium Oblique.ttf');
        /* IE9 Compat Modes */
        src: url('OregonFont/Oregon LDO Medium Oblique.ttf') format('embedded-opentype'), /* IE6-IE8 */
        url('OregonFont/Oregon LDO Medium Oblique.ttf') format('ttf'), /* Super Modern Browsers */
        url('OregonFont/Oregon LDO Medium Oblique.ttf') format('ttf'), /* Pretty Modern Browsers */
        url('OregonFont/Oregon LDO Medium Oblique.ttf') format('truetype'), /* Safari, Android, iOS */
        url('OregonFont/Oregon LDO Medium Oblique.ttf') format('ttf');
        /* Legacy iOS */
    }

    @font-face {
        font-family: 'HurtMold';
        src: url('HurtmoldFont/HURTM___.otf');
        /* IE9 Compat Modes */
        src: url('HurtmoldFont/HURTM___.otf') format('embedded-opentype'), /* IE6-IE8 */
        url('HurtmoldFont/HURTM___.otf') format('otf'), /* Super Modern Browsers */
        url('HurtmoldFont/HURTM___.otf') format('otf'), /* Pretty Modern Browsers */
        url('HurtmoldFont/HURTM___.otf') format('opentype'), /* Safari, Android, iOS */
        url('HurtmoldFont/HURTM___.otf') format('otf');
        /* Legacy iOS */
    }

    * {
        box-sizing: border-box;
    }

    .background-image {
        background-image: url('http://kormancommercial.com/images/property_type_images/display/6/retail-office.jpg?1300135482');
        background-size: cover;
        display: block;
        filter: blur(5px);
        -webkit-filter: blur(5px);
        height: 800px;
        left: 0;
        position: fixed;
        right: 0;
        z-index: 1;
    }

    .Heading {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
        filter: alpha(opacity=70);
        -moz-opacity: 0.7;
        -khtml-opacity: 0.7;
        opacity: 0.7;
        background: rgb(255, 255, 255) url('http://greenmediawebsites.com/index_files/Gray-Background-Gradient.jpg') no-repeat left top;
        border-radius: 3px;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        top: 12%;
        left: 40%;
        position: absolute;
        width: 500px;
        height: 300px;
        top: 10% right: 0;
        z-index: 2;
        padding: 0 10px;
        font-size: 72px;
    }

    .HurtMoldRight {
        font-family: 'HurtMold', Fallback, sans-serif;
        color: White;
        background-color: Black;
        margin-right: 10px;
        margin-left: 10px;
        float: right;
    }

    .HurtMoldLeft {
        font-family: 'HurtMold', Fallback, sans-serif;
        color: White;
        background-color: Black;
        float: left;
        margin-right: 10px;
        margin-left: 10px;
    }

    .Oregon {
        font-family: 'Oregon', Fallback, sans-serif;
    }
    *
    {
    overflow:auto;
    }
</style>
</head>

<body>
<div class="background-image"></div>
<div class="Heading">
    <div class="Oregon">
        <div class="HurtMoldLeft"><i> Your </i></div> Phrase
        <br> With a
        <div class="HurtMoldRight"><i> Display. </i></div>
    </div>
</div>
    <div id='cssmenu' >
    <ul>
    <h2>
        <li class='active'><a href='#'>Home</a></li>
        <li><a href='#'>Products</a></li>
        <li><a href='#'>Company</a></li>
        <li><a href='#'>Contact</a></li>
        </h2>
    </ul>
</div>
</body>

</html>

俄勒冈字体和伤害字体都正常工作。

我做错了什么？

Answer 1

我更新了jsfiddle你能检查一下是否适合你？也许我错过了一些东西，但现在看起来更接近教程。

“ul”标签的第一个元素必须是“li”元素。

<ul>
    <li class='active'><a href='#'>Home</a></li>
    <li><a href='#'>Products</a></li>
    <li><a href='#'>Company</a></li>
    <li><a href='#'>Contact</a></li>
</ul>

link to jsfiddle

Answer 2

首先，在您的html中，您在菜单列表中添加了一个h2标记。这会影响css造型的方式。尝试删除h2 第二，在你的CSS底部附近，你有一个随机的*搞乱你的代码。删除它。

(function($) {

        $.fn.menumaker = function(options) {

            var cssmenu = $(this),
                settings = $.extend({
                    title: "Menu",
                    format: "dropdown",
                    breakpoint: 768,
                    sticky: false
                }, options);

            return this.each(function() {
                cssmenu.find('li ul').parent().addClass('has-sub');
                if (settings.format != 'select') {
                    cssmenu.prepend('<div id="menu-button">' + settings.title + '</div>');
                    $(this).find("#menu-button").on('click', function() {
                        $(this).toggleClass('menu-opened');
                        var mainmenu = $(this).next('ul');
                        if (mainmenu.hasClass('open')) {
                            mainmenu.hide().removeClass('open');
                        } else {
                            mainmenu.show().addClass('open');
                            if (settings.format === "dropdown") {
                                mainmenu.find('ul').show();
                            }
                        }
                    });

                    multiTg = function() {
                        cssmenu.find(".has-sub").prepend('<span class="submenu-button"></span>');
                        cssmenu.find('.submenu-button').on('click', function() {
                            $(this).toggleClass('submenu-opened');
                            if ($(this).siblings('ul').hasClass('open')) {
                                $(this).siblings('ul').removeClass('open').hide();
                            } else {
                                $(this).siblings('ul').addClass('open').show();
                            }
                        });
                    };

                    if (settings.format === 'multitoggle') multiTg();
                    else cssmenu.addClass('dropdown');
                } else if (settings.format === 'select') {
                    cssmenu.append('<select style="width: 100%"/>').addClass('select-list');
                    var selectList = cssmenu.find('select');
                    selectList.append('<option>' + settings.title + '</option>', {
                        "selected": "selected",
                        "value": ""
                    });
                    cssmenu.find('a').each(function() {
                        var element = $(this),
                            indentation = "";
                        for (i = 1; i < element.parents('ul').length; i++) {
                            indentation += '-';
                        }
                        selectList.append('<option value="' + $(this).attr('href') + '">' + indentation + element.text() + '</option');
                    });
                    selectList.on('change', function() {
                        window.location = $(this).find("option:selected").val();
                    });
                }

                if (settings.sticky === true) cssmenu.css('position', 'fixed');

                resizeFix = function() {
                    if ($(window).width() > settings.breakpoint) {
                        cssmenu.find('ul').show();
                        cssmenu.removeClass('small-screen');
                        if (settings.format === 'select') {
                            cssmenu.find('select').hide();
                        } else {
                            cssmenu.find("#menu-button").removeClass("menu-opened");
                        }
                    }

                    if ($(window).width() <= settings.breakpoint && !cssmenu.hasClass("small-screen")) {
                        cssmenu.find('ul').hide().removeClass('open');
                        cssmenu.addClass('small-screen');
                        if (settings.format === 'select') {
                            cssmenu.find('select').show();
                        }
                    }
                };
                resizeFix();
                return $(window).on('resize', resizeFix);

            });
        };
    })(jQuery);

    (function($) {
        $(document).ready(function() {

            $(document).ready(function() {
                $("#cssmenu").menumaker({
                    title: "Menu",
                    format: "dropdown"
                });

                $("#cssmenu a").each(function() {
                    var linkTitle = $(this).text();
                    $(this).attr('data-title', linkTitle);
                });
            });

        });
    })(jQuery);

@import url(http://fonts.googleapis.com/css?family=Raleway);
    #cssmenu,
    #cssmenu ul,
    #cssmenu ul li,
    #cssmenu ul li a,
    #cssmenu #menu-button {
        margin: 0;
        padding: 0;
        border: 0;
        list-style: none;
        line-height: 1;
        display: block;
        position: relative;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    #cssmenu:after,
    #cssmenu > ul:after {
        content: ".";
        display: block;
        clear: both;
        visibility: hidden;
        line-height: 0;
        height: 0;
    }

    #cssmenu #menu-button {
        display: none;
    }

    #cssmenu {
        width: auto;
        font-family: Raleway, sans-serif;
        line-height: 1;
    }

    #cssmenu > ul {
        background: #3db2e1;
    }

    #cssmenu > ul > li {
        float: left;
        -webkit-perspective: 1000px;
        -moz-perspective: 1000px;
        perspective: 1000px;
    }

    #cssmenu.align-center > ul {
        font-size: 0;
        text-align: center;
    }

    #cssmenu.align-center > ul > li {
        display: inline-block;
        float: none;
    }

    #cssmenu.align-right > ul > li {
        float: right;
    }

    #cssmenu > ul > li > a {
        padding: 16px 20px;
        font-size: 14px;
        color: #ffffff;
        letter-spacing: 1px;
        text-transform: uppercase;
        text-decoration: none;
        background: #3db2e1;
        -webkit-transition: all .3s;
        -moz-transition: all .3s;
        -o-transition: all .3s;
        transition: all .3s;
        -webkit-transform-origin: 50% 0;
        -moz-transform-origin: 50% 0;
        transform-origin: 50% 0;
        -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        transform-style: preserve-3d;
    }

    #cssmenu > ul > li.active > a {
        color: #dff2fa;
    }

    #cssmenu > ul > li:hover > a,
    #cssmenu > ul > li > a:hover {
        color: #dff2fa;
        -webkit-transform: rotateX(90deg) translateY(-23px);
        -moz-transform: rotateX(90deg) translateY(-23px);
        transform: rotateX(90deg) translateY(-23px);
        -ms-transform: none;
    }

    #cssmenu > ul > li > a::before {
        position: absolute;
        top: 100%;
        left: 0;
        z-index: -1;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        padding: 16px 20px;
        color: #dff2fa;
        background: #19799f;
        content: attr(data-title);
        -webkit-transition: background 0.3s;
        -moz-transition: background 0.3s;
        transition: background 0.3s;
        -webkit-transform: rotateX(-90deg);
        -moz-transform: rotateX(-90deg);
        transform: rotateX(-90deg);
        -webkit-transform-origin: 50% 0;
        -moz-transform-origin: 50% 0;
        transform-origin: 50% 0;
        -ms-transform: translateY(- -18px);
    }

    #cssmenu > ul > li:hover > a::before,
    #cssmenu > ul > li > a:hover::before {
        background: #3db2e1;
    }

    #cssmenu.small-screen {
        width: 100%;
    }

    #cssmenu.small-screen > ul,
    #cssmenu.small-screen.align-center > ul {
        width: 100%;
        text-align: left;
    }

    #cssmenu.small-screen > ul > li,
    #cssmenu.small-screen.align-center {
        float: none;
        display: block;
        border-top: 1px solid rgba(100, 100, 100, 0.1);
    }
    #cssmenu.small-screen > ul > li:hover > a,
    #cssmenu.small-screen > ul > li > a:hover {
        color: #dff2fa;
        -webkit-transform: none;
        -moz-transform: none;
        transform: none;
        -ms-transform: none;
    }

    #cssmenu.small-screen > ul > li > a::before {
        display: none;
    }

    #cssmenu.small-screen #menu-button {
        display: block;
        padding: 16px 20px;
        cursor: pointer;
        font-size: 14px;
        text-decoration: none;
        color: #ffffff;
        text-transform: uppercase;
        letter-spacing: 1px;
        background: #3db2e1;
    }

    #cssmenu.small-screen #menu-button:after {
        content: "";
        position: absolute;
        right: 20px;
        top: 17px;
        display: block;
        -webkit-box-sizing: content-box;
        -moz-box-sizing: content-box;
        box-sizing: content-box;
        border-top: 2px solid #ffffff;
        border-bottom: 2px solid #ffffff;
        width: 22px;
        height: 3px;
    }

    #cssmenu.small-screen #menu-button.menu-opened:after {
        border-top: 2px solid #dff2fa;
        border-bottom: 2px solid #dff2fa;
    }

    #cssmenu.small-screen #menu-button:before {
        content: "";
        position: absolute;
        right: 20px;
        top: 27px;
        display: block;
        width: 22px;
        height: 2px;
        background: #ffffff;
    }

    #cssmenu.small-screen #menu-button.menu-opened:before {
        background: #dff2fa;
    }

    @font-face {
        font-family: 'Oregon';
        src: url('OregonFont/Oregon LDO Medium Oblique.ttf');
        /* IE9 Compat Modes */
        src: url('OregonFont/Oregon LDO Medium Oblique.ttf') format('embedded-opentype'), /* IE6-IE8 */
        url('OregonFont/Oregon LDO Medium Oblique.ttf') format('ttf'), /* Super Modern Browsers */
        url('OregonFont/Oregon LDO Medium Oblique.ttf') format('ttf'), /* Pretty Modern Browsers */
        url('OregonFont/Oregon LDO Medium Oblique.ttf') format('truetype'), /* Safari, Android, iOS */
        url('OregonFont/Oregon LDO Medium Oblique.ttf') format('ttf');
        /* Legacy iOS */
    }

    @font-face {
        font-family: 'HurtMold';
        src: url('HurtmoldFont/HURTM___.otf');
        /* IE9 Compat Modes */
        src: url('HurtmoldFont/HURTM___.otf') format('embedded-opentype'), /* IE6-IE8 */
        url('HurtmoldFont/HURTM___.otf') format('otf'), /* Super Modern Browsers */
        url('HurtmoldFont/HURTM___.otf') format('otf'), /* Pretty Modern Browsers */
        url('HurtmoldFont/HURTM___.otf') format('opentype'), /* Safari, Android, iOS */
        url('HurtmoldFont/HURTM___.otf') format('otf');
        /* Legacy iOS */
    }

    * {
        box-sizing: border-box;
    }

    .background-image {
        background-image: url('http://kormancommercial.com/images/property_type_images/display/6/retail-office.jpg?1300135482');
        background-size: cover;
        display: block;
        filter: blur(5px);
        -webkit-filter: blur(5px);
        height: 800px;
        left: 0;
        position: fixed;
        right: 0;
        z-index: -1;
    }

    .Heading {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
        filter: alpha(opacity=70);
        -moz-opacity: 0.7;
        -khtml-opacity: 0.7;
        opacity: 0.7;
        background: rgb(255, 255, 255) url('http://greenmediawebsites.com/index_files/Gray-Background-Gradient.jpg') no-repeat left top;
        border-radius: 3px;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        top: 12%;
        left: 40%;
        position: absolute;
        width: 500px;
        height: 300px;
        top: 10% right: 0;
        z-index: 2;
        padding: 0 10px;
        font-size: 72px;
    }

    .HurtMoldRight {
        font-family: 'HurtMold', Fallback, sans-serif;
        color: White;
        background-color: Black;
        margin-right: 10px;
        margin-left: 10px;
        float: right;
    }

    .HurtMoldLeft {
        font-family: 'HurtMold', Fallback, sans-serif;
        color: White;
        background-color: Black;
        float: left;
        margin-right: 10px;
        margin-left: 10px;
    }

    .Oregon {
        font-family: 'Oregon', Fallback, sans-serif;
    }
    
    {
    overflow:auto;
    }

<div class="background-image"></div>
<div class="Heading">
    <div class="Oregon">
        <div class="HurtMoldLeft"><i> Your </i></div> Phrase
        <br> With a
        <div class="HurtMoldRight"><i> Display. </i></div>
    </div>
</div>
    <div id='cssmenu' >
    <ul>
    
        <li class='active'><a href='#'>Home</a></li>
        <li><a href='#'>Products</a></li>
        <li><a href='#'>Company</a></li>
        <li><a href='#'>Contact</a></li>
       
    </ul>
</div>

Answer 3

我稍微更新了你的代码。现在菜单显示并正常工作。

问题是，你在ul之后添加了一个h2标签，

只有李才能来到ul之后。这就是菜单没有正确初始化的原因。

更新后的代码，

＆＃13;

<html>

<head>
  <meta charset='utf-8'>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
  <style type="text/css">
    @import url(http://fonts.googleapis.com/css?family=Raleway);
    #cssmenu,
    #cssmenu ul,
    #cssmenu ul li,
    #cssmenu ul li a,
    #cssmenu #menu-button {
      margin: 0;
      padding: 0;
      border: 0;
      list-style: none;
      line-height: 1;
      display: block;
      position: relative;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
    }
    #cssmenu:after,
    #cssmenu > ul:after {
      content: ".";
      display: block;
      clear: both;
      visibility: hidden;
      line-height: 0;
      height: 0;
    }
    #cssmenu #menu-button {
      display: none;
    }
    #cssmenu {
      width: auto;
      font-family: Raleway, sans-serif;
      line-height: 1;
    }
    #cssmenu > ul {
      background: #3db2e1;
    }
    #cssmenu > ul > li {
      float: left;
      -webkit-perspective: 1000px;
      -moz-perspective: 1000px;
      perspective: 1000px;
    }
    #cssmenu.align-center > ul {
      font-size: 0;
      text-align: center;
    }
    #cssmenu.align-center > ul > li {
      display: inline-block;
      float: none;
    }
    #cssmenu.align-right > ul > li {
      float: right;
    }
    #cssmenu > ul > li > a {
      padding: 16px 20px;
      font-size: 14px;
      color: #ffffff;
      letter-spacing: 1px;
      text-transform: uppercase;
      text-decoration: none;
      background: #3db2e1;
      -webkit-transition: all .3s;
      -moz-transition: all .3s;
      -o-transition: all .3s;
      transition: all .3s;
      -webkit-transform-origin: 50% 0;
      -moz-transform-origin: 50% 0;
      transform-origin: 50% 0;
      -webkit-transform-style: preserve-3d;
      -moz-transform-style: preserve-3d;
      transform-style: preserve-3d;
    }
    #cssmenu > ul > li.active > a {
      color: #dff2fa;
    }
    #cssmenu > ul > li:hover > a,
    #cssmenu > ul > li > a:hover {
      color: #dff2fa;
      -webkit-transform: rotateX(90deg) translateY(-23px);
      -moz-transform: rotateX(90deg) translateY(-23px);
      transform: rotateX(90deg) translateY(-23px);
      -ms-transform: none;
    }
    #cssmenu > ul > li > a::before {
      position: absolute;
      top: 100%;
      left: 0;
      z-index: -1;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      width: 100%;
      height: 100%;
      padding: 16px 20px;
      color: #dff2fa;
      background: #19799f;
      content: attr(data-title);
      -webkit-transition: background 0.3s;
      -moz-transition: background 0.3s;
      transition: background 0.3s;
      -webkit-transform: rotateX(-90deg);
      -moz-transform: rotateX(-90deg);
      transform: rotateX(-90deg);
      -webkit-transform-origin: 50% 0;
      -moz-transform-origin: 50% 0;
      transform-origin: 50% 0;
      -ms-transform: translateY(- -18px);
    }
    #cssmenu > ul > li:hover > a::before,
    #cssmenu > ul > li > a:hover::before {
      background: #3db2e1;
    }
    #cssmenu.small-screen {
      width: 100%;
    }
    #cssmenu.small-screen > ul,
    #cssmenu.small-screen.align-center > ul {
      width: 100%;
      text-align: left;
    }
    #cssmenu.small-screen > ul > li,
    #cssmenu.small-screen.align-center {
      float: none;
      display: block;
      border-top: 1px solid rgba(100, 100, 100, 0.1);
    }
    #cssmenu.small-screen > ul > li:hover > a,
    #cssmenu.small-screen > ul > li > a:hover {
      color: #dff2fa;
      -webkit-transform: none;
      -moz-transform: none;
      transform: none;
      -ms-transform: none;
    }
    #cssmenu.small-screen > ul > li > a::before {
      display: none;
    }
    #cssmenu.small-screen #menu-button {
      display: block;
      padding: 16px 20px;
      cursor: pointer;
      font-size: 14px;
      text-decoration: none;
      color: #ffffff;
      text-transform: uppercase;
      letter-spacing: 1px;
      background: #3db2e1;
    }
    #cssmenu.small-screen #menu-button:after {
      content: "";
      position: absolute;
      right: 20px;
      top: 17px;
      display: block;
      -webkit-box-sizing: content-box;
      -moz-box-sizing: content-box;
      box-sizing: content-box;
      border-top: 2px solid #ffffff;
      border-bottom: 2px solid #ffffff;
      width: 22px;
      height: 3px;
    }
    #cssmenu.small-screen #menu-button.menu-opened:after {
      border-top: 2px solid #dff2fa;
      border-bottom: 2px solid #dff2fa;
    }
    #cssmenu.small-screen #menu-button:before {
      content: "";
      position: absolute;
      right: 20px;
      top: 27px;
      display: block;
      width: 22px;
      height: 2px;
      background: #ffffff;
    }
    #cssmenu.small-screen #menu-button.menu-opened:before {
      background: #dff2fa;
    }
    @font-face {
      font-family: 'Oregon';
      src: url('OregonFont/Oregon LDO Medium Oblique.ttf');
      /* IE9 Compat Modes */
      src: url('OregonFont/Oregon LDO Medium Oblique.ttf') format('embedded-opentype'),
      /* IE6-IE8 */
      url('OregonFont/Oregon LDO Medium Oblique.ttf') format('ttf'),
      /* Super Modern Browsers */
      url('OregonFont/Oregon LDO Medium Oblique.ttf') format('ttf'),
      /* Pretty Modern Browsers */
      url('OregonFont/Oregon LDO Medium Oblique.ttf') format('truetype'),
      /* Safari, Android, iOS */
      url('OregonFont/Oregon LDO Medium Oblique.ttf') format('ttf');
      /* Legacy iOS */
    }
    @font-face {
      font-family: 'HurtMold';
      src: url('HurtmoldFont/HURTM___.otf');
      /* IE9 Compat Modes */
      src: url('HurtmoldFont/HURTM___.otf') format('embedded-opentype'),
      /* IE6-IE8 */
      url('HurtmoldFont/HURTM___.otf') format('otf'),
      /* Super Modern Browsers */
      url('HurtmoldFont/HURTM___.otf') format('otf'),
      /* Pretty Modern Browsers */
      url('HurtmoldFont/HURTM___.otf') format('opentype'),
      /* Safari, Android, iOS */
      url('HurtmoldFont/HURTM___.otf') format('otf');
      /* Legacy iOS */
    }
    * {
      box-sizing: border-box;
    }
    .background-image {
      background-image: url('http://kormancommercial.com/images/property_type_images/display/6/retail-office.jpg?1300135482');
      background-size: cover;
      display: block;
      filter: blur(5px);
      -webkit-filter: blur(5px);
      height: 800px;
      /*left: 0;*/
      /*position: fixed;*/
      /*right: 0;*/
      /*z-index: 1;*/
    }
    .Heading {
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
      filter: alpha(opacity=70);
      -moz-opacity: 0.7;
      -khtml-opacity: 0.7;
      opacity: 0.7;
      background: rgb(255, 255, 255) url('http://greenmediawebsites.com/index_files/Gray-Background-Gradient.jpg') no-repeat left top;
      border-radius: 3px;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      top: 12%;
      left: 40%;
      position: absolute;
      width: 500px;
      height: 300px;
      top: 10% right: 0;
      z-index: 2;
      padding: 0 10px;
      font-size: 72px;
    }
    .HurtMoldRight {
      font-family: 'HurtMold', Fallback, sans-serif;
      color: White;
      background-color: Black;
      margin-right: 10px;
      margin-left: 10px;
      float: right;
    }
    .HurtMoldLeft {
      font-family: 'HurtMold', Fallback, sans-serif;
      color: White;
      background-color: Black;
      float: left;
      margin-right: 10px;
      margin-left: 10px;
    }
    .Oregon {
      font-family: 'Oregon', Fallback, sans-serif;
    }
    /** {
        overflow: auto;
    }*/
  </style>
</head>

<body class="background-image">
  <div></div>
  <div class="Heading">
    <div class="Oregon">
      <div class="HurtMoldLeft"><i> Your </i>
      </div>Phrase
      <br>With a
      <div class="HurtMoldRight"><i> Display. </i>
      </div>
    </div>
  </div>
  <div id='cssmenu'>
    <ul>
      <li class='active'><a href='#'>Home</a>
      </li>
      <li><a href='#'>Products</a>
      </li>
      <li><a href='#'>Company</a>
      </li>
      <li><a href='#'>Contact</a>
      </li>
    </ul>
  </div>
  <script>
    (function($) {

      $.fn.menumaker = function(options) {

        var cssmenu = $(this),
          settings = $.extend({
            title: "Menu",
            format: "dropdown",
            breakpoint: 768,
            sticky: false
          }, options);

        return this.each(function() {
          cssmenu.find('li ul').parent().addClass('has-sub');
          if (settings.format != 'select') {
            cssmenu.prepend('<div id="menu-button">' + settings.title + '</div>');
            $(this).find("#menu-button").on('click', function() {
              $(this).toggleClass('menu-opened');
              var mainmenu = $(this).next('ul');
              if (mainmenu.hasClass('open')) {
                mainmenu.hide().removeClass('open');
              } else {
                mainmenu.show().addClass('open');
                if (settings.format === "dropdown") {
                  mainmenu.find('ul').show();
                }
              }
            });

            multiTg = function() {
              cssmenu.find(".has-sub").prepend('<span class="submenu-button"></span>');
              cssmenu.find('.submenu-button').on('click', function() {
                $(this).toggleClass('submenu-opened');
                if ($(this).siblings('ul').hasClass('open')) {
                  $(this).siblings('ul').removeClass('open').hide();
                } else {
                  $(this).siblings('ul').addClass('open').show();
                }
              });
            };

            if (settings.format === 'multitoggle') multiTg();
            else cssmenu.addClass('dropdown');
          } else if (settings.format === 'select') {
            cssmenu.append('<select style="width: 100%"/>').addClass('select-list');
            var selectList = cssmenu.find('select');
            selectList.append('<option>' + settings.title + '</option>', {
              "selected": "selected",
              "value": ""
            });
            cssmenu.find('a').each(function() {
              var element = $(this),
                indentation = "";
              for (i = 1; i < element.parents('ul').length; i++) {
                indentation += '-';
              }
              selectList.append('<option value="' + $(this).attr('href') + '">' + indentation + element.text() + '</option');
            });
            selectList.on('change', function() {
              window.location = $(this).find("option:selected").val();
            });
          }

          if (settings.sticky === true) cssmenu.css('position', 'fixed');

          resizeFix = function() {
            if ($(window).width() > settings.breakpoint) {
              cssmenu.find('ul').show();
              cssmenu.removeClass('small-screen');
              if (settings.format === 'select') {
                cssmenu.find('select').hide();
              } else {
                cssmenu.find("#menu-button").removeClass("menu-opened");
              }
            }

            if ($(window).width() <= settings.breakpoint && !cssmenu.hasClass("small-screen")) {
              cssmenu.find('ul').hide().removeClass('open');
              cssmenu.addClass('small-screen');
              if (settings.format === 'select') {
                cssmenu.find('select').show();
              }
            }
          };
          resizeFix();
          return $(window).on('resize', resizeFix);

        });
      };
    })(jQuery);

    (function($) {
      $(document).ready(function() {

        $(document).ready(function() {
          $("#cssmenu").menumaker({
            title: "Menu",
            format: "dropdown"
          });

          $("#cssmenu a").each(function() {
            var linkTitle = $(this).text();
            $(this).attr('data-title', linkTitle);
          });
        });

      });
    })(jQuery);
  </script>
</body>

</html>

＆＃13;

Answer 4

尝试给#cssmenu一个约5％的保证金。

菜单上的文字变为不可见

4 个答案: