メニューの横スクロールバーを消したい
色々と探しても解決法が見つからないのでどなたかご教授いただけませんでしょうか。
※無事表示されればそれでいいので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%を消すと横スクロールバーが消える事はわかったのですが、
それだと中央揃えにならないので…。
どうか宜しくお願いします！
お礼
回答ありがとうございました。 参考URLも大変参考になりました。