- 締切済み
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
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- fujillin
- ベストアンサー率61% (1594/2576)
参考例が特別なレイアウトならまだしもごく普通のものなので（ただし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/
補足
貴重なアドバイスありがとうございます。 現在、制作していますウェブサイト（ 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 の中に入っております。 もし宜しければ、ご教授をお願いします。 失礼致します。