菜单未显示在 Android 设备上

问题描述

所以我开发了一个菜单，它显示了台式机或更大的平板电脑上的所有按钮，而在移动设备上只有一个“菜单”按钮。奇怪的是，在每个 android 设备上，按钮都不会出现在纵向上，而只出现在横向上。在任何其他设备（iPhone、iPad、笔记本电脑等）上一切正常。可能是什么问题？

这是.CSS里面菜单相关的部分：

nav #menu {
      float: left;
      right: 80px;
      position: fixed;
}

nav #menu li {
      padding-left: 40px;
      display: inline-block;
      cursor: pointer;
      font-weight: 300;
      line-height: 80px;
      position: relative;
      transition: all 0.3s ease-out;
}

nav #menu li span {
      font-weight: 700;
}

nav #menu li a {
      color: #f0d0b5;
}

nav #menu li a:hover {
      text-decoration: none;
      color: #fff;
}

#toggle {
      position: absolute;
      right: 30px;
      top: 20px;
      font-weight: 300;
      z-index: 2;
      width: 30px;
      height: 30px;
      cursor: pointer;
      float: right;
      transition: all 0.3s ease-out;
      visibility: hidden;
      opacity: 0;
      color: #f0d0b5;
}

.close-btn {
      position: absolute;
      right: 16px;
      font-weight: 300;
      z-index: 2;
      cursor: pointer;
      top: -2px;
      line-height: 80px;
      color: #f0d0b5;
}

#resize {
      z-index: 1;
      top: 0px;
      position: fixed;
      background: #0f0f0f;
      width: 100%;
      height: 100%;
      visibility: hidden;
      opacity: 0;
      transition: all 1s ease-out;
}

#resize #menu {
      height: 90px;
      position: absolute;
      left: 45%;
      transform: translateX(-40%);
      text-align: center;
      display: table-cell;
      vertical-align: center;
}

#resize #menu li {
      display: block;
      text-align: center;
      padding: 10px 0;
      font-size: 50px;
      min-height: 50px;
      font-weight: bold;
      cursor: pointer;
      transition: all 0.3s ease-out;
}

#resize li:nth-child(1) {
      margin-top: 140px;
}

#resize #menu li a {
      color: #f0d0b5;
}

#resize #menu li a:hover {
      text-decoration: none;
      color: #fff;
}

#resize.active {
      visibility: visible;
      opacity: 1;
}

@media(max-width: 768px) {
      #toggle {
            visibility: visible;
            opacity: 1;
            margin-top: 6px;
            margin-right: 4px;
      }

      nav #brand {
            margin-left: 24px;
      }

      #menu a {
            font-size: 20px;
            font-weight: 300;
      }

      #resize li span {
            font-weight: bolder;
      }

      nav #menu {
            display: none;
      }
}

@media(min-width: 768px) {
      #resize {
            visibility: hidden !important;
      }
}

解决方法

关于这个菜单的 HTML 代码：

 <ul id="menu">
                        <li><a href="index.html">HOME<span>.</span></a></li>
                        <li><a href="#about" target="_blank">VIDEO<span>.</span></a></li>
                        <li><a href="#" target="_blank">FOTO<span>.</span></a></li>
                        <li><a href="#" target="_blank">BUY<span>.</span></a></li>
                        
                  </ul>

           
                  
                  <div id="toggle">
                        <div class="span">meniu</div>
                  </div> 

            </nav>

            <div id="resize">
                  <div class="close-btn">închide</div>

                  <ul id="menu">
                        <li><a href="index.html">HOME<span>.</span></a></li>
                        <li><a href="#about" target="_blank">VIDEO<span>.</span></a></li>
                        <li><a href="#" target="_blank">FOTO<span>.</span></a></li>
                        <li><a href="#" target="_blank">BUY<span>.</span></a></li>
                       
                  </ul>