Question

我正在建立一个新网站，并且一段时间以来我在各个网站上都使用相同的代码。我在移动设备上显示汉堡包时遇到问题。我已经多次为菜单重建了CSS代码，现在我发现我有一些代码可以覆盖它-无论是Bootstrap 3.3.7还是我自己的站点CSS。我的CSS是否阻止了汉堡包切换菜单在手机上显示？

Here is the testing site for this website HTML：

<div class="hnav"><div class="container">
<input type="checkbox" id="css3menu-switcher" class="c3m-switch-input">
<ul id="css3menu1" class="topmenu">
<li class="topmenu"><a href="../index.html">HOME</a></li>
<li class="topmenu"><a href="#">SPA SERVICES</a>
    <ul>
    <li class="subfirst"><a href="../massage.html">MASSAGE</a></li>
    <li><a href="../facials.html">FACIALS</a></li>
    <li><a href="../manipedi.html">MANI/PEDI</a></li>
    <li><a href="../men.html">FOR MEN</a></li>
    <li><a href="../makeup.html">MAKEUP</a></li>
    <li><a href="../browlash.html">BROW & LASH</a></li>
    <li><a href="../waxing.html">WAXING</a></li>
    <li><a href="../wholebody.html">WHOLE BODY</a></li>
</ul></li> 
<li class="topmenu"><a href="../hair.html">HAIR SERVICES</a>
<li class="topmenu"><a href="#">SPECIALS</a>
<ul>
    <li class="subfirst"><a href="../memberships.html">MEMBERSHIPS</a></li>
    <li><a href="../packages.html">PACKAGES</a></li>
</ul></li> 
<li class="topmenu"><a href="../news.html">NEWS</a></li>
<li class="topmenu"><a href="../boutique.html">BOUTIQUE</a></li>
<li class="topmenu"><a href="#">YOUR VISIT</a>
    <ul>
    <li class="subfirst"><a href="../lockers.html">LOCKERS</a></li>
    <li><a href="../lunch.html">LUNCH</a></li>
    <li><a href="../drinks.html">WINE/BEER</a></li>
    <li><a href="../lodging.html">LODGING</a></li>
    <li><a href="../tour.html">VIDEOS AND PHOTOS</a></li>
    <li><a href="../akelagarden.html">AKELA GARDEN</a></li>
</ul></li>

包含导航菜单的我的CSS：

.hnav{background-color:#6f3b5f; padding-top:1px; padding-bottom:1px; margin-top:15px; font:Cinzel; font-weight:bolder; text-align:center; z-index:99;}

菜单CSS：

ul#css3menu1,ul#css3menu1 ul{   margin:0;list-style:none;padding:0;background-color:#6f3b5f;border-width:0;border-style:solid;border-color:;}
ul#css3menu1 ul{display:none;position:absolute;left:0;top:100%;background-color:#60818f;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;-moz-box-shadow:0
-8px 16px -4px #a18e70 inset;-webkit-box-shadow:0 -8px 16px -4px #a18e70 inset;box-shadow:0 -8px 16px -4px #a18e70 inset;padding:0 7px 7px;}
 ul#css3menu1 li:hover>*{   display:block;}
ul#css3menu1 li{    position:relative;display:block;white-space:nowrap;font-size:0;float:left;}
ul#css3menu1 li:hover{  z-index:1;}
ul#css3menu1{   font-size:0;z-index:999;position:relative;display:inline-block;zoom:1;padding:0;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;
*display:inline;}
* html ul#css3menu1 li a{   display:inline-block;}
ul#css3menu1>li{    margin:0;}
ul#css3menu1 a:active, ul#css3menu1 a:focus{    outline-style:none;}
ul#css3menu1 a{     display:block;vertical-align:middle;text-align:center;text-decoration:none;font:bold
17px Cinzel,serif;color:#000000;cursor:pointer;padding:17px
17px;background-color:;background-repeat:repeat;border-width:0px;border-style:none;border-color:;}
ul#css3menu1 ul li{     float:none;margin:7px 0 0;}
ul#css3menu1 ul a{  text-align:left;    padding:5px 15px;   background-color:#60818f;   border-radius:0px;
-moz-border-radius:0px;     -webkit-border-radius:0px;  font:Cinzel;
color:#fff;     text-decoration:none;   text-shadow:0 1px 1px #7f6e55;}
 ul#css3menu1 li:hover>a,ul#css3menu1 li a.pressed{     border-style:none;color:#FFFFFF;}
ul#css3menu1 > li.switch{   display:none;cursor:pointer;width:25px;height:20px;padding:17px 20px;}
ul#css3menu1 > li.switch:before{    content:"";position:absolute;display:block;height:4px;width:25px;border-radius:4px;background:#fff;-moz-box-shadow:0 8px #fff, 0 16px #fff;-webkit-box-shadow:0 8px #fff, 0 16px #fff;box-shadow:0 8px #fff, 0 16px #fff;}
ul#css3menu1 > li.switch:hover:before{  background:#FFFFFF;-moz-box-shadow:0 8px #FFFFFF, 0 16px #FFFFFF;-webkit-box-shadow:0 8px #FFFFFF, 0 16px #FFFFFF;box-shadow:0 8px #FFFFFF, 0 16px #FFFFFF;}
.c3m-switch-input{  display:none;}
ul#css3menu1 li:hover>a,ul#css3menu1 li > a.pressed{    border-style:none;color:#FFFFFF;text-decoration:none;}
ul#css3menu1 ul li:hover>a,ul#css3menu1 ul li > a.pressed{  background-color:#6f3b5f;color:#ffffff;text-decoration:none;text-shadow:0
1px 1px #7f6e55;}
ul#css3menu1 li.topmenu>a{  -moz-box-shadow:none;-webkit-box-shadow:none;box-shadow:none;background-color:#6f3b5f;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;color:#fff;}
ul#css3menu1 li.topmenu:hover>a,ul#css3menu1 li.topmenu > a.pressed{    -moz-box-shadow:inset 0 8px 12px -2px #a18e70;-webkit-box-shadow:inset 0 8px 12px -2px #a18e70;box-shadow:inset 0 8px 12px -2px #a18e70;background-color:#08333d;color:#FFFFFF;} @media screen and (max-width: 965px) {     ul#css3menu1 > li {         position: initial;}
ul#css3menu1 ul .submenu,ul#css3menu1 li > ul {left: 0; right:auto; top: 100%;}     ul#css3menu1 .submenu,ul#css3menu1
ul,ul#css3menu1 .column {       -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;padding-right: 0;width: 100% !important;}
}
 @media screen and (max-width: 964px) {     ul#css3menu1 {      width: 100%;}   ul#css3menu1 > li {         display: none;      position: relative;     width: 100% !important;}    ul#css3menu1 >
li.switch,.c3m-switch-input:checked + ul#css3menu1 > li + li      {display: block;}     ul#css3menu1 > li.switch > label {position:absolute;cursor: pointer;top: 0;left: 0;right: 0;bottom: 0;}}

Answer 1

我加载了您的测试网站（顺便说一句，看起来不错），检查午餐页面时，我检查了元素以查看所用的html，我注意到您根本没有在html中包含汉堡包菜单？您可能是无意中删除了它，还是我在错误的页面上？

汉堡菜单未显示在移动html和CSS3Menu上

1 个答案: