CSS 菜单栏样式表菜单不呈现

Question

我有一个项目需要一个 CSS 菜单栏，在 HTML 页面的右侧有一个概览面板。我的问题是 CSS 菜单栏样式表菜单不呈现。尝试让这个 CSS 菜单栏正常工作，然后扩展内容链接、登录、仪表板等的代码功能。

代码：标签

<header class='header'>
    <div class='header_top-bar'>
        <div class='top-bar_title'>
            <a href='index'><h1><img src='images/logo.png' data-image='images/logo.png' alt='Athena'></h1></a>
            <div class='ajax-loader' id='ajax-loader'>
                <div class='ajax-loader_animator'></div>
            </div>
        </div>
        <div class='top-bar_toggle' id='menu_toggle'>
            <span></span>
            <span></span>
            <span></span>
        </div>
        <!-- <div class='top-bar_share' id='share_toggle'>
            <span class='underline--white'>
                SHARE
            </span>
        </div> -->
        <div class='top-bar_menu' id='overlay_menu'>
            <ul class='menu_container'>
                <li class='menu_item'>
                    <span>.01.</span>
                    <a class='link-ajax' href='/'>Home</a>
                </li>
                <li class='menu_item'>
                    <span>.02.</span>
                    <a class='link-ajax' href='/project'>Athena Customers</a>
                </li>
                <li class='menu_item'>
                    <span>.03.</span>
                    <a class='link-ajax' href='/wines'>Athena Services</a>
                </li>
                <li class='menu_item'>
                    <span>.04.</span>
                    <a class='link-ajax' href='/sustainability'>Athena Sustainability</a>
                </li>
                <li class='menu_item'>
                    <span>.05.</span>
                    <a class='link-ajax' href='/hospitality'>Athena Dashboards</a>
                </li>
            </ul>

            <div class='language-chooser menu_item'>
                <div class='masi-agricola_wrapper hide-on-mobile'>
                    <a href='http://www.masi.it' target='_blank' class='masi-agricola_link'>
                        <img src='images/agricola.png' data-image='images/agricola.png'/>
                    </a>
                </div>
                <p class='text--subtitle'>select your language</p>
                <span class='language-link'><a class='' href='/en/'>Eng</a></span>
                <span class='line-break'></span>
                <span class='language-link'><a class='' href='/es/'>Esp</a></span>
                <span class='line-break'></span>
                <span class='language-link'><a class='' href='/it/'>Ita</a></span>
            </div>
        </div>
    </div>
</header>

代码：内容部分

<div id="new-plh" class="plh"></div>
<div id="actual-plh" class="plh">  
    <section class="main-content clearfix homepage">
        <div class="main-content_background">
            <div class="half_screen full-height-desk" id="biggest_block">
                <a href="project" class="">
                    <div class="text-block">
                        <div class="full-image_header page-header">
                            <h1 class="page-header_title text--title">
                                Athena Intelligence Earth's Essential Data
                            </h1>
                            <strong class="page-header_subtitle text--subtitle">
                                Athena Intelligence Login
                            </strong>
                        </div>
                        <img data-image="images/project-header.jpg" src="images/project-header.jpg" alt="">
                    </div>
                </a>
            </div>
            <div class="half_screen full-height-desk">
                <a href="wines">
                    <div class="text-block three_row">
                            <div class="full-image_header page-header">
                                <h1 class="page-header_title text--title">
                                    Athena: Many industries: all use Land, Food, Energy, Water
                                </h1>
                                <strong class="page-header_subtitle text--subtitle">
                                    The Gods: Land, Food, Energy, Water
                                </strong>
                            </div>
                        <div class="image-container">
                            <img class="three_images" data-image="images/wines-header.jpg" src="images/wines-header.jpg" alt="">
                        </div>
                    </div>
                </a>
                <a href="sustainability" class="">
                    <div class="text-block three_row">
                            <div class="full-image_header page-header">
                                <h1 class="page-header_title text--title">
                                    Land, Food, Energy, Water: Sustainability
                                </h1>
                                <strong class="page-header_subtitle text--subtitle">
                                    Athena : Dedication To Land, Food, Energy, Water
                                </strong>
                            </div>
                        <div class="image-container">
                            <img class="three_images" data-image="images/sustainability-header.jpg" src="images/sustainability-header.jpg" alt="">
                        </div>
                    </div>
                </a>
                <a href="hospitality">
                    <div class="text-block three_row">
                            <div class="full-image_header page-header">
                                <h1 class="page-header_title text--title">
                                    Land, Food, Energy, Water: Hospitality
                                </h1>
                                <strong class="page-header_subtitle text--subtitle">
                                    Land, Food, Energy, Water: That Welcomes You
                                </strong>
                            </div>
                        <div class="image-container">
                            <img class="three_images" data-image="images/hospitality-header.jpg" src="images/hospitality-header.jpg" alt="">
                        </div>
                    </div>
                </a>
            </div>
            </div>
    </section>

代码：标题栏包装标签

    <div class='out-loader_wrapper'>
        <div class='out-loader'>
            <div class='filler' id='filler'>
                <img class='logo-loader' src='images/logo.png' data-image='images/logo.png'/>
            <div class='filler-bar'></div>
            <p class='text--title' id='loader_text'>0</p>
        </div>
     </div>
</div>

Answer 1

鉴于您没有发布完整的 HTML，我无法判断您是否正确链接了样式表。您的 HTML 中没有任何内容看起来不合适，这意味着如果您看不到呈现的样式，则说明样式表没有正确链接到文档，或者如果您使用的是 SASS 或 LESS 等预处理器，则您没有正确导入它.

但是，您可以尝试以下方法：

1. 确保在文档的<head> 中正确链接它，例如<link href="path/to/your/menu-stylesheet.css rel="stylesheet">。
2. 如果您要链接多个样式表，请确保以正确的顺序链接它们。这意味着，如果您引用在另一个样式表中声明的类或样式，则必须确保在进行引用的样式表之前链接所引用的样式表。
3. 如果您使用预处理器，请确保您正确导入了样式表，如 @import 'path/to/stylesheet.less（无论您的情况如何，请注意正确的扩展名。
4. 如果您使用诸如 grunt 或 gulp 之类的任务运行程序，则可以将样式表连接到一个样式表中。