こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

締切り済みの質問

cssでプルダウンを追加したい♪

ウェブサイト作成で質問がございます。
http://www.sl-success.com/hallo-casino/
上記のサイトの上部のメニューバーにプルダウンできるメニュー項目を追加したいのですが、cssを追加修正しましたら、レイアウトが崩れてしまい、うまく修正できません。

プルダウンを追加したいソース部分は以下のところです。
<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><a href="top.html">gaming guides</a><a href="contact/contact-index.html" class="last">Contact Us</a></div></td>
</tr>

CSSは以下のように設定しております。
#menu{
background:#1D3C55;
border-bottom:#345065 1px solid;}
#menu a{
color:#E9F1F9;
text-transform:uppercase;
border-left:#001F39 1px solid;
border-right:#345065 1px solid;
padding:20px 25px 14px 25px;
line-height:42px;
}
#menu a:hover, #menu a.active{
background:#001F39;
color:#E9F1F9;
}
#menu a.frist{ border-left:none;}
#menu a.last{ border-right:none;}

CSSあるいは、JAVAを使ってどのように修正をつければ宜しいか是非、ご教授お願いします。

下のURLにhtmlとcssのファイルをアップしております。
http://www.sl-success.com/hallo-casino/ask.rar

投稿日時 - 2011-03-17 04:13:05

QNo.6598591

困ってます

このQ&Aは役に立ちましたか?

4人が「このQ&Aが役に立った」と投票しています

回答(1)

ANo.1

参考例が特別なレイアウトならまだしもごく普通のものなので(ただしtableレイアウトですが)、それを参考になさる理由がわかりません。

一般的なプルダウンメニューのサンプルを参考に作成して、カラーなどはご自分の好きなように変更したほうが早そうに思われます。
大抵のサンプルではリストを利用したマークアップをしていると思いますが、そのほうがメニューの構造と合致しているので、合理的なマークアップと考えられます。


ぐぐってみればサンプルはたくさん見つかると思いますが、ごく一例 (内容は見ていません)
 http://www.justsoftwaresolutions.co.uk/articles/sample_menu.html
 http://css-eblog.com/csstechnique/css-8.html
 http://c-brains.jp/blog/wsg/08/06/05-155929.php
 http://www.stylish-style.com/csstec/ultimate/css-roll-4.html


javascriptを利用したプルダウンのサンプルなら、それこそもっとたくさんあるでしょうし、ライブラリ化されたものもたくさんあります。
こちらも内容は見ていませんが・・・
 http://vandelaydesign.com/blog/tools/dropdown-navigation-menus/
 http://www.strollnet.com/sample/javascript/jquery/sample13/
 http://www.css-lecture.com/template/2009/0622/

投稿日時 - 2011-03-17 10:07:11

補足

貴重なアドバイスありがとうございます。

現在、制作していますウェブサイト( http://www.sl-success.com/hallo-casino/index.html )の上部メニューバーに、プルダウンを追加しようとソースコードを修正致しました。

修正したソースコードの部分を抜粋します。
<body>
<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 id="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>

上記のソースコードをブラウザで表示させたのが、( http://www.sl-success.com/hallo-casino/index-testjefri13.html )です。

しかしレイアウトが崩れてしまいました。これは、どのように修正をすれば宜しいでしょうか。

上記のcssファイルは、( http://www.sl-success.com/hallo-casino/style-jefri2.css )からDLできます。
また、http://www.sl-success.com/hallo-casino/index-testjefri13.htmlのファイル全ては、http://www.sl-success.com/hallo-casino/index-table-dalam-div.rar
の中に入っております。

もし宜しければ、ご教授をお願いします。
失礼致します。

投稿日時 - 2011-03-21 20:50:13

あなたにオススメの質問