0

CSSで質問です。 ナビゲーション作成にて、リンクボタンを中央に持ってきて、左右は単なるバーにしたいのですが、うまくいきません・・
ご教授お願いいたします。。。（リンクボタンがどうしても左詰になってしまいます。）

CSS
------------
/* ナビゲーション設定 開始 */
div#gnavi{
list-style-type: none;
width: 800px;
height: 36px;
margin: 0px;
padding: 0px;
clear:both;
border:0px solid;
background-image:url(img/navi_bg.gif);
background-repeat:repeat-x;
}

div#gnavi ul{
margin:auto;
padding:auto;
font-size:80%;
}

div#gnavi ul li{
width:130px;
height:36px;
float:left;
line-height:36px;
position:relative;
}

div#gnavi ul li.office_info{
background-position:0px -36px;
background:url(img/navi_common.gif) no-repeat;
color:#fff;
}

div#gnavi a{
display:block;
background:url(img/navi_common.gif) no-repeat;
height:36px;
text-decoration:none;
color:#333;
}

div#gnavi a:hover{
display:block;
background-position:0 -36px;
color:#fff;
}

div#gnavi ul li ul.pd{
display:none;
font-size:100%;
padding:0;
}


div#gnavi ul li:hover ul.pd{
display:block;
position:absolute;
z-index:10;
}



html
-----------------------------

<!-- Begin ナビ -->
<div id="gnavi">
<ul>
<li class="office_info"><a href="#">情報</a>
<ul class="pd">
<li><a href="#">ごあいさつ</a></li>
<li><a href="#">概要</a></li>
<li><a href="#">#</a></li>
<li><a href="#">グループ</a></li>
<li><a href="#">情報</a></li>
<li><a href="#">主な取組み</a></li>
</ul>
</li>
<li><a href="#">よくある質問</a>
<ul class="pd">
<li><a href="#">運営について</a></li>
<li><a href="#">について</a></li>
</ul>
</li>
<li><a href="#">情報</a>
<ul class="pd">
<li><a href="#">採用</a></li>
</ul>
</li>
<li><a href="#">特 集</a>
<ul class="pd">
<li><a href="#">カメラコンテスト</a></li>
</ul>
</li>
<li><a href="#">その他</a></li>
</ul>
</div><!-- ナビ終了 -->

質問者が選んだベストソリューション

Yahoo!知恵袋 5180日前