CSS样式表 - 菜单栏问题不起作用

时间:2017-07-20 04:05:11

标签: javascript jquery html css css3

我有一个新的Web项目需要一个CSS菜单栏,其中HTML页面右侧有一个概述面板面板。我的问题是CSS菜单栏样式表菜单不起作用。试图让这个CSS菜单栏工作,然后扩展内容链接,登录,仪表板等的代码功能。下面的整个HTML和CSS:

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->

<head>   
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
<title>Athena Intelligence : Internet of Earth (IoE)</title>
<meta name='description' content=''>
<meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1' />
<meta name='format-detection' content='telephone=no'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js'></script>  
<link rel='stylesheet' href='css/main.css'>
</head>    
<body>        
<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>
</div>
<input type='hidden' id='lang' value='it' />
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'></script>
<script> window.jQuery || document.write('<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js')</script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js' type='text/javascript'></script>

</body>
</html>

CSS Main文件为211,908行,不能整体包含。询问部分;我将包括相关CSS的部分

0 个答案:

没有答案