CSS菜單崩潰，但我不明白爲什麼

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> 

如果我強迫菜單的寬度200像素螢火蟲，它會做什麼，我想它，但我不能讓它的動態調整。

我可能失去了一些東西很明顯，但我不能看到那裏的倒塌行爲的來源。

任何提示將非常感謝！謝謝。

Answer 1

你必須對http://rollsupreme.com/wp-content/themes/test-nerdy/framework/style.php?ver=1.0.7這是隱藏列表時的菜單項寬度小於600px的其中談到媒體查詢下238線的樣式。所以，當你調整到一個尺寸小於600px的所有元素dissapear

#cssmenu > ul li { 
    display: none; 
} 

你將要改變這

#cssmenu > ul li { 
    display:block; 
} 

每個菜單項現在顯示在每一個行是標準的手機菜單。