0
我本身不是網頁設計師。我目前是在大學讀書的副本作家和動畫師。不過，我正與我的一位平面設計師和網站設計師的朋友合作。我們的問題是，如果你看看下面的圖片。我們網站上的菜單很長，它會扭曲我們在移動設備上的其他網站。菜單扭曲移動設備頁面並在右側創建空白空間
我們的菜單位於網站頂部附近，但使用Javascript，當您向下滾動頁面時，菜單將修復到頁面頂部。當它被固定在頂端時，滾動頁面看起來很正常，但是當菜單位於原來的位置時，它會在頁面上創建一個不應該在那裏的白色區域。我假設它是因爲它太長，但如果有人可以看看，並幫助我，我會非常感激。
此頁可以找到HERE我將刪除鏈接後的問題回答未來的後代。
這是我的菜單CSS時，在其原來的位置，以及時固定在用戶滾動瀏覽器的頂部，。
#menu, #menu ul {
margin: 0 auto;
padding: 0;
background-color: #FFFFFF;
}
#menu {
display: table;
width: 100%;
list-style: none;
position: relative;
top: -30px;
text-align: center;
-webkit-box-shadow: 0px 3px 5px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 3px 5px 0px rgba(50, 50, 50, 0.75);
box-shadow: 0px 3px 5px 0px rgba(50, 50, 50, 0.75);
font-size: 18px;
height: 20px;
z-index: -101;
}
#menu.fixed {
position: fixed;
top: 0;
width: 100%;
}
#menu li {
display: table-cell;
list-style: none;
padding-right: 50px;
left: 50px;
vertical-align:middle;
}
#menu > li:hover > ul {
background:#FFF;
display: block;
left: 0;
width: 100%;
-webkit-box-shadow: 0px 3px 2px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 3px 2px 0px rgba(50, 50, 50, 0.75);
box-shadow: 0px 3px 2px 0px rgba(50, 50, 50, 0.75);
border-top:thin dotted #999;
top: 32px;
}
#menu > li > ul {
display: none;
position: absolute;
text-align: center;
}
#menu li a {
display: block;
padding: 2px 10px;
text-decoration: none;
font-weight: lighter;
white-space: nowrap;
color: #333;
}
#menu li a:hover {
color: #CCCCCC;
font-size: 18px;
vertical-align: middle;
}
#menu li ul li {display: inline-block;
float:none; }