テーブルの中のプルダウンがフロートできません

質問

恐れ入ります、
現在、こちらのサイトを手がけております。
http://www.sl-success.com/hallo-casino/index.html

このサイトの上部のメニューバーにプルダウンメニューを組み込みたくて、修正をしてみましたがレイアウトが崩れてしまいます。

http://www.sl-success.com/hallo-casino/index-testjefri13-2.html
上記のようにテーブルメニューの中に、ulを組み込んでみました。このプルダウンしたいULをメニューの中に入れたいのですが、うまくフロートできません。

こちらの該当しているソースを書きます。

<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="top"><div id="menu"><a href="index.html" class="frist active">HOME</a><a href="review.html">casino bonus guide</a><a href="top10/top10index.html">Online Casino TOP10</a><a href="#">free casino games</a>
<div class="menune">
<ul>
<li>
<a href="review.html">bonus ne</a>
<ul>
<li><a href="#"> jepang1</a> </li>
<li><a href="#"> jepang2</a> </li>
<li><a href="#"> jepang33</a> </li>
</ul>
</li>
</ul>
</div>
<a href="contact/contact-index.html" class="last">Contact Us</a></div></td>
</tr>

対応しているcssは以下の通りです。

.menune{
background:#ff0000; /*------#1d3c55----------*/
border-bottom:#345065 1px solid;
margin-left:auto;
margin-right:auto;
width:auto;
height:auto;
text-align:center;
}
.menune ul{
list-style:none;
}

.menune li{
float:left;
}
.menune li a{
background:#1d3c55;
color:#cccccc;
display:block;
text-align:center;
text-decoration:none;
text-transform:uppercase;
border-left:#001F39 1px solid;
border-right:#345065 1px solid;
padding:20px 25px 14px 25px;
}
.menune li a:hover, .menune ul li:hover a{
background:#001F39;
color:#e9f1f9; /*---e9f1f9-----*/
text-decoration:none;
}
.menune li ul{
background:none;
display:none;
padding:0px;
margin:0px;
border:0px;
position:absolute;
z-index:200;
}
.menune li:hover ul{
display:block;
}
.menune li li {
display:block;
float:none;
margin:0px;
padding:0px;
height:70px;
width:135px;
}

上記のサイトをうまく修正できればありがたいのですが、もしお分かりであればご教授お願い致します。

失礼します。

回答No.4

karita_83

メールアドレスを載せることは規約に違反しています。
okwaveの規約はしっかりと読まれるべきだと思いますが。
下手をすれば質問ごと削除される対象になります。

#menueにmargin:0 auto;を足してください。
それか、#menueのwidthを100%にしても上手くいくようですが、
ブラウザチェックをしていないので、そちらで試してみてください。

下のボーダーを現在選択されているメニューだけで消すとなると、
大きな修正が必要になります。
それでもやりたいかどうか、今一度お考えいただいてよろしいでしょうか？

メニューの表示位置が違うのは幅が違うからです。
それぞれのメニューの幅を見直して修正しなおしてみてください。

補足

早速のご回答、ありがとうございます。
規約違反につきましては、申し訳ございません。今後、気をつけます。
いただいた助言で何とかがんばってみます。
またご報告させていただきます。
取り急ぎ、お礼にて
失礼します。

回答No.3

karita_83

お返事が遅くなりまして申し訳ございません。

私が以前お教えした方法は試したのでしょうか？
いかがでしたか？
それでもだめでしたか？

何をどうしたけれどどうなったのか、もう一度現状を教えていただきたいです。

補足

karita_83様

ご連絡ありがとうございます。
こちらこそ、ご報告が送れて申し訳ございません。

教えていただきました情報をもとに、いろいろ調整してみましたところ、下記のような状態まで持ってくることが出来ました。

http://www.sl-success.com/hallo-casino/index-ikut-dropdown.html
上記のサイトですが、元のサイト（　http://www.sl-success.com/hallo-casino/index.html　）と比べて、以下のような違いがまだ出ております。
http://www.sl-success.com/hallo-casino/fuguai/index-dropdownfuguai1.JPG

また、現在firefoxのバージョン4を使用しておりますが、横幅を縮小しますと上部のナビバーのずれが生じます。
http://www.sl-success.com/hallo-casino/fuguai/index-dropdownfuguaizure1.JPG

そこまで大きな問題ではないのですが、やっぱり気になる部分でございます。
恐らく、根本的に作り直さないといけないのかなと思っております。

またお時間ございましたら宜しくお願いします。
cssはこちらです。
http://www.sl-success.com/hallo-casino/css/style-dropdown-test1.css

また、私の連絡先です。jamberapa@mail.goo.ne.jp
今後とも宜しくお願いします。
失礼します。

回答No.2

karita_83

こんにちは。

似たような内容で別に質問をされるようであれば、
前の質問は締め切ってください。
一番最初の質問もまだ締めきっていませんよね？

派生して出た新たな質問で、
私が答えた内容に関しては解決したというのであれば質問を締め切っておくのがマナーだと思います。

私のお礼に書かれている質問と内容が同じに見えますが

あせっているのはわかりますが、こういうことを繰り返していると誰も答えてくれなくなると思いますよ

新しい回答者さんがほしくて別の質問をたちあげるのは分かりますが、
なんだか私馬鹿みたいです。

一度締め切って、こちらのアドレスを貼っておけば、新しい回答者さんも得られて、かつ私も見に来ると思います。
それじゃあだめですか？

補足

karita_83様
申し訳ございません。
前回の、質問から引き続き、同じような質問を、こちらのサイトとhttp://okwave.jp/qa/q6618057.html
にも投稿して、ご迷惑をおかけいたしました。

今後は、投稿にも気をつけてまいります。
今後ともよろしくお願いします。
失礼します。

回答No.1

question_buster

これは残念ながら一箇所がダメだとかそういう話じゃないですね…

<a>タグはインライン要素なので並べれば並びますが
divはブロック要素なのでそのままだと一行使っちゃいます。
なので一段下にずれているのです。
また、divの中のリストでfloatをしているのにも関わらずfloatをclearしていないのでそのまま次の要素も回り込んじゃってる、という形ですね。
見た目的には回り込んだのが正解にみえますが、違います。

改修の提案としては
■a要素をブロック要素にして(そのままでも出来ますが)float:left;
■divのwidthを決めてfloat:left;
■divの中のulも邪魔
■メニューが終わったら<div style="clear:both;"></div>なり、なんなりしてfloatを解除(clearfixが便利)
って感じですかね。

僕なら上のメニューは全部リストにしちゃいますかねー。

まぁそんなに難しくはないです。
インラインとボックス要素の違いとfloatの効果なんかを調べるといいかとおもいますよ。
がんばって。

お礼

貴重な、ご意見、ありがとうございます。
今後とも宜しくお願いします。