gpt4 book ai didi

html - 主菜单不显示在手机上(纵向)

转载 作者:行者123 更新时间:2023-11-28 00:55:34 26 4
gpt4 key购买 nike

所以我仍在学习移动设备的 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>

菜单 block 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;
}

移动菜单 block

@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 的链接认为在那里更容易阅读......

最佳答案

您将 UL 设置为“不显示”,最大宽度为 767 像素。

@media only screen and (max-width: 767px)
.sf-菜单{
显示:无!重要;
/* float :无; */

这就是为什么你没有菜单,从你的 UL 中删除“显示无”。

关于html - 主菜单不显示在手机上(纵向),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52957532/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com