Question

我正在尝试使网站更加适合移动设备 - 但我没有使用原始菜单代码，而且它有点混乱。特别是标题证明是有问题的。

理想情况下，它应该始终居中，如果屏幕分辨率变得太窄而无法覆盖整个顶部，则每个菜单选项应显示在不同的行上。该网站是rollsupreme.com

菜单的CSS在这里：

#cssmenu > ul {
  max-width: 640px;
  min-width 200px;
  list-style-type: none;
  padding: 0;
  margin: 0;
  background: #ffffff;
 border: 0px solid #000000;
  border-bottom: 1px solid #000000;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  -o-border-radius: 2px;
  border-radius: 2px;
}

#cssmenu > ul li {
  display: inline-block;
text-align: left;
  *display: inline;
  zoom: 1;
}
#cssmenu > ul li.right {
  float: right;
}
#cssmenu > ul li.has-sub {
  position: relative;
}
#cssmenu > ul li.has-sub:hover ul {
  display: block;
  z-index: 10;
}
#cssmenu > ul li.has-sub ul {
  display: none;
  width: 250px;
  position: absolute;
  margin: 0;
  padding: 0;
  list-style-type: none;
  background: #ffffff;
  border: 1px solid #ece6e8;
  border-bottom: 1px solid #00000;
  border-top: 0 none;
}
#cssmenu > ul li.has-sub ul li {
  display: block;
}
#cssmenu > ul li.has-sub > a {

  background-repeat: no-repeat;
  background-position: 90% -95%;
}
#cssmenu > ul li.has-sub > a.active,
#cssmenu > ul li.has-sub > a:hover {
  z-index: 10;
  background-position: 90% 195%;
}
#cssmenu > ul li a {
  display: block;
  padding: 12px 24px 11px 24px;
  text-decoration: none;
  color: #000000;
  text-shadow: 0px 1px 0px #fff;
}
#cssmenu > ul li a.active,
#cssmenu > ul li a:hover {
  background: #ffffff;
  color: #000000;
  z-index: 10;
  text-shadow: 0px 1px 0px #000;
}
@media (max-width: 600px) {
  #cssmenu > ul {
    width: 100%;
  }
  #cssmenu > ul li#responsive-tab {
    display: block;
  }
  #cssmenu > ul li#responsive-tab a {
    background-position: 95% -35%;
  }
  #cssmenu > ul li#responsive-tab a:hover {
    background-color: #ffffff;
    background-position: 95% 135%;
  }
  #cssmenu > ul li {
    display: none;
  }
  #cssmenu > ul li.right {
    float: none;
  }
  #cssmenu > ul li.has-sub {
    position: relative;
  }
  #cssmenu > ul li.has-sub ul {
    display: block;
    position: static;
    width: 100%;
    background: #ffffff;
    border: 0 none;
  }
  #cssmenu > ul li.has-sub ul li {
    display: block !important;
  }
  #cssmenu > ul li.has-sub ul li a span {
    display: block;
    padding-left: 24px;
  }
  #cssmenu > ul li.has-sub > a {
    background-image: none;
  }
}
/* Make sure they show even if hidden in mobile view by JS */
@media (min-width: 100px) {
  #cssmenu > ul > li.collapsed {
    display: inline-block !important;
    *display: inline;
    zoom: 1;
  }

  #cssmenu > ul ul li.collapsed {
    display: block !important;
  }
}

正在发生的事情是它将调整为540px，然后菜单崩溃。

菜单如下所示：

<ul>
    <li id="menu-item-633" class="menu-item menu-item-type-custom menu-item-object-custom"><a href="http://rollsupreme.com/product-category/gikimono/"><span>Gi/Kimono</span></a></li>
    <li id="menu-item-603" class="menu-item menu-item-type-custom menu-item-object-custom"><a href="http://rollsupreme.com/product-category/t-shirts/"><span>T Shirts</span></a></li>
    <li id="menu-item-604" class="menu-item menu-item-type-custom menu-item-object-custom"><a href="http://rollsupreme.com/product-category/hoodies/"><span>Hoodies</span></a></li>
    <li id="menu-item-605" class="menu-item menu-item-type-custom menu-item-object-custom"><a href="http://rollsupreme.com/product-category/rashguards/"><span>Rashguards</span></a></li>
    <li id="menu-item-606" class="menu-item menu-item-type-custom menu-item-object-custom"><a href="http://rollsupreme.com/product-category/shorts/"><span>Shorts</span></a></li>
    <li id="menu-item-607" class="menu-item menu-item-type-custom menu-item-object-custom"><a href="http://rollsupreme.com/product-category/sweaters/"><span>Sweaters</span></a></li>
</ul>
</li>
<li id="menu-item-527" class="menu-item menu-item-type-custom menu-item-object-custom"><a href="http://rollsupreme.com/blog"><span>Blog</span></a></li>
<li id="menu-item-646" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://rollsupreme.com/us/"><span>ABOUT US</span></a></li>
<li id="menu-item-528" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://rollsupreme.com/cart/"><span>Cart</span></a></li>
<li id="menu-item-529" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://rollsupreme.com/checkout/"><span>Checkout</span></a>

如果我在Firebug中将菜单的宽度强制为200px，它会按我的意愿执行，但我无法动态调整大小。

我可能遗漏了一些明显的东西，但我看不出崩溃行为的来源。

任何提示都将非常感谢！感谢。

Answer 1

http://rollsupreme.com/wp-content/themes/test-nerdy/framework/style.php?ver=1.0.7的第238行有一个样式，当宽度小于600px时，它会隐藏您的列表菜单项，这是在媒体查询下进行的。因此，当您调整大小小于600px时，所有元素都会消失

#cssmenu > ul li {
    display: none;
}

您需要将其更改为

#cssmenu > ul li {
    display:block;
}

现在每个菜单项都显示在一行，每行都是移动菜单的标准。

CSS菜单以540px折叠但我看不清楚原因

1 个答案: