0
私はウェブサイト上で作業していますが、オンラインで解決策が見つからない問題が発生しました。メニューが画面外になりますが、ページはスクロールできません
私はドロップダウンメニューを設計しましたが、これは問題です。ページが拡大表示されている場合は、2行に分割されます（ドロップダウンメニューでは望ましくありません）。メニューの最小幅。位置が絶対に設定されているため、右にスクロールできず、メニューが画面から消えます。 bodyタグの最小幅を設定しても、私はボディをスクロールできますが、メニューはそのままになりません。
ポジションを絶対に保つ必要があります。そうでなければ、私はそれを一番上に置いておきたいと思いますので、助けていただければ幸いです。スマートフォンのように画面が実際にズームインされます。
ここにはメニューコードがあります（あまりにも長いので、全体の一部ではありませんが、主要な部分です。詳細は、尋ねるか、ページを訪れ、ソースコードを参照してください）。
ウェブサイト：http://newfutureuniversity.org/
HTML：
...
<body>
<div id="container">
<div class="menu" >
<ul>
<li><a href="http://newfutureuniversity.org/">New Future</a></li>
<li><a href="http://newfutureuniversity.org/learn/degree/">Learn</a>
<ul class="bottom">
...
</ul>
</li>
...
CSS：
body /* Changes the style for the whole body */
{
position:absolute;
margin:0px; /* Avoids margin in the whole page */
padding:0px;
border:0px;
background-color: #EEEEEE; /* Default background color, light grey */
height:100%; /* Vertically complete */
width:100%;
min-width:400px;
min-height: 100%;
color: #333; /* Letters color */
}
#container /* The container has the header, main and footer inside */
{
position:relative;
margin:0px;
padding:0px;
min-height: 100%; /* Avoids the footer to go up */
height: auto !important;
height: 100%;
margin: 0px auto -51px;
}
.menu
{
position: fixed;
top:0px;
left:0px;
opacity:0.3;
filter:alpha(opacity=30); /* For IE8 and earlier */
width:100%;
min-width:400px;
border:none;
border-bottom:1px solid gray;
margin:0px;
padding:0px;
font-size:18px;
z-index:3;
}
.menu ul
{
background:#DDD;
height:26px;
list-style:none;
margin:0px;
padding:0px;
z-index:3;
}
.menu li{
width:24.5%;
min-width:93px;
float:left;
padding:0px;
margin: 2px 0px 2px 0.5%;
}
...
EDIT： あなたがunmaximizeすると、デスクトップのブラウザで問題を見るためにズームする必要があります。
私が最大化して300％にズームしても、Windows 7とIE9でそれが起こっているのを見ないでください。あなたは問題の写真を投稿できますか？ – Jawad
ここに追加された問題の画像：http://oi40.tinypic.com/2eqc104.jpg –