メニューの横スクロールバーを消したい

質問

色々と探しても解決法が見つからないのでどなたかご教授いただけませんでしょうか。
※無事表示されればそれでいいのでhtmlの記述方法についてのお叱りなどは勘弁して下さい。

ドロップダウンメニューをセンタリング表示しているのですが、
どうあっても横スクロールバーが出てしまいます。
下記サイトではoverflow:hiddenを使用すると書いていますが
使用するとドロップダウンが非表示になってしまうため難しいです。
http://www.coolwebwindow.com/csstips/csstechnic/000241.php

【html】

<div id="global-nav">
<ul class="menu" id="menu">
<li class="a">イメージ画像</a>
<ul>
<li>ドロップダウン</li>
<li>ドロップダウン</li>
<li>ドロップダウン</li>
</ul>
</li>
<li class="a">イメージ画像</a>
<ul>
<li>ドロップダウン</li>
<li>ドロップダウン</li>
</ul>
</li>
<li class="a">イメージ画像</a>
<ul>
<li>ドロップダウン</li>
</ul>
</li>
<li class="a">イメージ画像</a>
<ul>
<li><a href="dl-1.html">ドロップダウン</a></li>
<li><a href="dl-2.html">ドロップダウン</a></li>
<li><a href="dl-3.html">ドロップダウン</a></li>
</ul>
</li>
</ul>
</div>

【css】

div#global-nav {
position:relative;
width: 1000px;
height: 40px;
margin: 0 auto;
background: #999;
}

ul.menu {
　　position: relative;
　　list-style:none;
　　left:50%;
　　float:left;
　　margin:0;
padding:0;
　　text-align: left;
}

ul.menu * {
　　margin:0;
　　padding:0;
}

ul.menu a {
　　display:block;
color:#000;
text-decoration:none;
}

ul.menu li.a {
　　position: relative;
left:-50%;
float:left;
}

ul.menu ul {
　　position:absolute;
top:40px;
left:0;
background:#d1d1d1;
display:none;
opacity:0;
list-style:none;
}

ul.menu ul li {
　　position:relative;
　　border-top:none;
　　width:180px;
　　margin:0;
}

ul.menu ul li a {
display:block;
padding:3px 7px 5px;
background-color:#d1d1d1;
}

ul.menu ul li a:hover {
background-color:#c5c5c5;
}

ul.menu ul ul {
left:180px;
top:-1px;
}

ul.menu .menulink {
width:180px;
}

ul.menu .menulink:hover, ul.menu .menuhover {
background:url(images/header_over.gif);
}

ul.menuの中のleft:50%を消すと横スクロールバーが消える事はわかったのですが、
それだと中央揃えにならないので…。
どうか宜しくお願いします！

回答No.1

ORUKA1951 · ベストアンサー

不必要なclass名やidを書き連ねるとHTMLもCSSも煩雑になります。折角のCascading style Sheetなのですからカスケーディングを使わなきゃ・・

・継承するものは継承させる。
・同じプロパティはセレクタのグループ化で一度しか書かない
・セレクタで特定できるものまで、不必要なidやclass名は書かない。
・ひとつのHTML要素に関わる部分は、スクロールなしに見渡せるよう整理する。

　サンプルは外形だけですが、HTMLもスタイルシートもこんな簡単でわかりやすいもので済むはずです。それでいて、スマートホンから幅広ディスプレイに対応しています。(ウィンド幅を伸縮して確認してください。また、固定スタイルにするときは設定を変更してください。)

　まあ、スタイルシートは20～30行程度に抑えるとメンテナンスが楽です。

　プルダウンメニューについて、本来はdispaly:inline-block;とtext-align:centerを組み合わせるべきですが、古いブラウザを考慮するとfloat:leftも致し方ないでしょう。

★いずれも、タブが全角スペースに置換してあるので戻すこと。
[HTML]class名のnavはHTML5の要素名、将来HTML5に変更すると気楽なので・・
<div class="nav" id="global-nav">
　<ul>
　　<li>イメージ画像</a>
　　　<ul>
　　　　<li>ドロップダウン</li>
　　　　<li>ドロップダウン</li>
　　　　<li>ドロップダウン</li>
　　　</ul>
　　</li>
　　<li>イメージ画像</a>
　　　<ul>
　　　　<li>ドロップダウン</li>
　　　　<li>ドロップダウン</li>
　　　</ul>
　　</li>
　　<li>イメージ画像</a>
　　　<ul>
　　　　<li>ドロップダウン</li>
　　　</ul>
　　</li>
　　<li>イメージ画像</a>
　　　<ul>
　　　　<li><a href="dl-1.html">ドロップダウン</a></li>
　　　　<li><a href="dl-2.html">ドロップダウン</a></li>
　　　　<li><a href="dl-3.html">ドロップダウン</a></li>
　　　</ul>
　　</li>
　</ul>
</div>

[CSS]子セレクタやinline-blockを理解しない古いブラウザを考慮して長ったらしくなってます。
div.nav ul,div.nav ul li{
　display:block;list-style:none;
　margin:0;padding:0;
　line-height:40px;text-align:center;
}
div.nav ul{
　width:80%;height:40px;
　margin:0 auto;min-width:640px;max-width:1000px;
　background-color:#999;
}
div.nav ul li{width:25%;float:left;position:relative;}
div.nav ul li ul li{float:none;background:#d1d1d1;}
div.nav ul li ul{width:100%;position:absolute;background-color:transparent;}
div.nav ul li ul{display:none;}
div.nav ul li:hover ul{display:block;}
div.nav ul li a{display:block;}

お礼

ありがとうございました！