html - 移动设备上不显示主菜单（纵向）

问题描述

所以我仍在学习用于移动设备的 css / html。我有一个在桌面上看起来不错的网站。当您在移动设备上将其拉起时，菜单消失了。如果您进入美化模式，将出现菜单。为什么有任何帮助？

菜单代码。

<div class="menu_block ">
    <div class="container_12">
        <div class="grid_12">
            <nav class="horizontal-nav full-width horizontalNav-notprocessed">
                <ul class="sf-menu">
                    <li <a href="index.php"><img src="images/logo.png" alt="wake up rentals"></a></li>
                    <li class="current"><a href="index.php">Home</a></li>
                    <li><a href="rental.php">Rentals</a></li>
                    <li><a href="lakes.php">Lakes</a></li>
                    <li><a href="Register.php">Rent Now</a></li>
                    <li><a href="FAQ.php">FAQ's</a></li>
                    <li><a href="Login.php">Login</a></li>
                    <li><a href="Contact.php">Contact Us</a></li>
                </ul>
            </nav>
            <div class="clear"></div>
        </div>
        <div class="clear"></div>
    </div>
</div>

菜单块 CSS

.menu_block  {
    z-index: 999;
    position: relative;
    background: url(../images/menu_bg.png) 0 0 repeat-x #d8d8db;
    padding: 12px 0 11px;
}


.menu_block nav {
    position: relative;
    font-family: 'Marvel', sans-serif;
}


nav>.sf-menu {
    z-index: 990;
    text-align: center;
    position: relative;
}
nav{ position:relative;padding: 0px 0 0 0;}
.sf-menu ul {position:absolute;top:-999px; display:none;/* left offset of submenus need to match (see below) */}
.sf-menu>li {
    display: block;
    position: relative;
    display: inline-block;
    font-size: 24px;
    line-height: 20px;

}

.sf-menu>li>ul>li {
    float: none;
    position: static;
}

.sf-menu>li+li {
    margin-left: 27px;
}

.sf-menu>li>a{
    font-weight: bold;
    text-align: center;
    color: #313030;
    display: block;
    padding: 9px 25px;

}

.sf-menu>li.sfHover>a, .sf-menu>li.current>a, .sf-menu>li>a:hover {
    color: #000;
    background-color: blue;}


.sf-menu>li>a.sf-with-ul:after {
    position: absolute;
    content: '';
    left: 50%;
    margin-left: -3px;
    width: 5px;
    background: url(../images/arrows.png) 0 0 no-repeat;
    height: 4px;
    bottom: 10px;
    pointer-events: none;
    z-index: 999;
    display: block;
}

.sf-menu>li>ul>li>a.sf-with-ul:after {
    content: '';
    font-family: 'FontAwesome';
    position: absolute;
    width: 5px;
    font-size: 15px;
    line-height: 13px;
    font-weight: normal;
    right: -15px;
    color: #fff;
    bottom: 3px;
    pointer-events: none;
    z-index: 999;
}

移动菜单块

@media only screen and (max-width: 767px) {
    .menu_block {
        float: none !important;
        padding: 20px 10px 25px !important;
        clear: both;
        min-height: 0px;
        border: none;
    }
    .menu_block nav {
        border: none !important;
        float:none !important;
        font:12px/15px Arial, Helvetica, sans-serif;
        text-transform:uppercase;
        color:#927c67;
        margin: 0 auto;
        padding-left: 0 !important;
    }

    header nav ul {
        border: none;
    }

    .sf-menu {
        display:none !important; 
        float: none;
    }

    #mm0 {
        font:12px/15px Arial, Helvetica, sans-serif;
        color:#202020;
        width:100%;
        margin: 0 auto;
        float: none;
        outline: none;
        border:2px solid #fff;
    }
}

我不确定您是否需要更多类似 container_12 和 grid_12 的代码。其中有很多行代码。并且不想添加很多不需要的信息。如果您认为需要它们，我可以发布它们。

Container_12 / 一些 grid_12 CSS https://pastebin.com/tup8Psis

Grid_12 CSS https://pastebin.com/qxAswhVc

发布到 css 的链接认为那里更容易阅读......

标签： htmlcss

html - 移动设备上不显示主菜单（纵向）

问题描述

解决方案

推荐阅读