Question

因此，我仍在学习有关移动设备的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的链接认为在那里更容易阅读...

Answer 1

您已将UL设置为“不显示”，最大宽度为767px。

@media only screen and (max-width: 767px) .sf-menu { display: none !important; /* float: none; */

这就是为什么您没有菜单，请从UL中删除“无显示”的原因。

主菜单不显示在手机上（人像）

1 个答案: