• 締切済み
  • すぐに回答を!

プルダウンメニューについて教えてください。

プルダウンメニューについて教えてください。 http://www.dynamicdrive.com/style/csslibrary/item/suckertree-menu-vertical/ ここに乗っているタグでメニューを作成したのですが、 なぜか ●隙間が開いてしまう ●サブメニューがすぐに閉じてしまう という現象が起きて困っています。 スクリーンショットを置きます。 CSSの部分をいろいろ変えてみたのですが、解決できませんでした。 どなたか教えて下さると助かります! どうかお願いします。

共感・応援の気持ちを伝えよう!

  • 回答数1
  • 閲覧数49
  • ありがとう数5

みんなの回答

  • 回答No.1
  • yuu_x
  • ベストアンサー率52% (106/202)

参照先スクリプトおよびCSSをそのまま利用しているのでしたら、HTML 文書に間違いが無いか見直して下さい。ul に不備がある可能性が高いように思います。 http://openlab.ring.gr.jp/k16/htmllint/htmllint.html # Java と JavaScript はまったくの別物です。

共感・感謝の気持ちを伝えよう!

質問者からのお礼

ありがとうございました

関連するQ&A

  • ポップアップメニュー

    SuckerTree Vertical Menu (v1.1) http://www.dynamicdrive.com/style/csslibrary/item/suckertree-menu-vertical/%22 のDemoの様なメニューを作りたいのですが、下に出ているCSSとHTMLをコピーしても、DemoのFolder 1から Sub Item 1.1 Sub Item 1.2 には動きませんでした。 JavaScriptか何か足りないタグでもあるんでしょうか? 詳しい方お願いします?

  • CSSでプルダウンメニューを作りたい

    お世話になります。 画像にマウスオーバーすると下にプルダウンでメニューが出るボタンを作りたいです。下記を希望のサイズやカラーにカスタマイズさせていただき、プルダウン自体はできました。 http://www.stylish-style.com/csstec/ultimate/css-roll-4.html しかし、今回私が作りたいのは A=プルダウンメニューが出ない B~E=プルダウンメニューが出る と、プルダウンの有無が混ざったボタンを横に並べる形です。 上記URLに書かれている方法ですとB~Eは問題なく並ぶのですが、Bの前にA画像を<li>タグで挿入するとAとBの間で改行されてしまいます。 どうしたら横にきちんと並ぶのでしょうか? ちなみにulの横幅は希望のものに合わせました。 CSSではなくjavascriptでないと無理なのでしょうか? どうぞよろしくお願い致します。

    • ベストアンサー
    • HTML
  • html,cssプルダウンメニューについて教えてください。

    html,cssプルダウンメニューについて教えてください。 現在html,cssのみでプルダウンメニューを作成しているのです、解決のできない問題点が あり困っています。どなたか知識のある方、教えていただけると嬉しいです。 [問題点] オンマウスでプルダウンメニュー表示時、その表示分だけ、親要素の<div>の 高さが広がってしまい、それに伴いそれ以下のページ内要素全て下にずれてきます。 (分かりにく表現で申し訳ありません) 出来れば、プルダウンメニューが表示されても、親要素の高さは変わらず、以下のタグ要素の 上に重なって表示させたいと思っています。 対処法がお分かりになる方、教えて頂けると幸いです。 [html] <div id="main_menu"> <div id="navi"> <ul> <li class="navi_menu" onmouseover="this.className='navi_menu_on'" onmouseout="this.className='navi_menu'"> <a href="#"><IMG src="img/main_menu04.gif"></a> <ul class="sub"> <li><a href="#">サブメニュー 1</a></li> <li><a href="#">サブメニュー 2</a></li> </ul> </li> <li class="navi_menu1" onmouseover="this.className='navi_menu_on'" onmouseout="this.className='navi_menu'"> <a href="#"><IMG src="img/main_menu05.gif"></a> <ul class="sub"> <li class="navi_menu1"><a href="#">サブメニュー 1</a></li> <li class="navi_menu1"><a href="#">サブメニュー 2</a></li> </ul> </li> </ul> </div> </div> [css] #navi { width:993; margin:0 auto; border:0px solid red; padding:0px 39px 0px 0px; } #navi ul { margin: 0; padding: 0; list-style: none; } #navi li { float: left; margin: 0; width:120px; } #navi li.navi_menu1{ float: left; margin: 0; width:140px; } #navi li a { font-size: 14px; color: #ffffff; display: block; width: 100%; padding: 0px 0; text-align: center; font-weight: bold; text-decoration: none; background-color: #3399ff; } #navi li a:hover { color: #ffffff; background-color: #3366cc; } #navi ul.sub { background: #eeeeee; } #navi ul.sub li { padding:5px 0px 0px 0px; float: none; height:25; } #navi ul.sub li.navi_menu1 { float: none; height:25; width:180; } #navi ul.sub li a { color: #666666; background: none; font-size: 12px; font-weight: normal; padding:0px 0; border-top:0px solid #000099; } #navi ul.sub li a:hover { color: #ffffff; background-color: #ff9900; } #navi ul li.navi_menu ul { display: none; } #navi ul li.navi_menu_on ul { display: block; } #navi li.navi_menu{ border:0px solid #000099; } #navi li.navi_menu_on{ border:0px solid #000099;}

  • プルダウンメニューからインラインフレームに飛ばすタグ

    ホームページビルダー9を使用しています。 サイトのトップページのメニューをプルダウンメニューにしています。 このメニューの一部をクリックしたら、同ページのインラインフレーム内にサブメニューを 表示するようにしたいのです。 スクリプトはこんな感じです。 <SCRIPT language=JavaScript> <!-- function mmLoadMenus() { if (window.mm_menu_1118095635_0) return; window.mm_menu_1118095635_0 = new Menu("root",132,28,"left","middle",8,0,1000,-5,7,true,true,true,0,true,true); mm_menu_1118095635_0.addMenuItem("1 ページ","location='○○○/○○○.htm'"); ↑↑↑↑ これは別ウィンドウを開いて表示するタグ。ちゃんと動作します。 うまくいかないのが、nameという名前のインラインフレーム内に表示させようとする以下のスクリプトです。 mm_menu_1118095635_0.addMenuItem("2ページ","location='sub_window/sub1.htm' target="main"); Java Scriptを使わないノーマルな、インラインフレームに飛ばすタグを使用しているのでうまくいかないのだと思います。 どなたかご教授いただければ幸いです。 よろしくお願いします。

  • ホームページでのページの切り替えボタンを縦並びに

    Dynamic Driveさんに記載されているページボタンを使用しようと思っているのですが、ページのリストを横ではなく縦にしたいのですが、そのようなことは可能でしょうか? http://www.dynamicdrive.com/style/csslibrary/item/css_pagination_links/ « previous 1 2 3 4 5 ...... next »   ↓ « previous 1 2 3 4 5 .......... next » のような並びにしたいと思っています。 分かる方がおられましたら、回答宜しくお願い致します。

    • ベストアンサー
    • HTML
  • プルダウンメニューについて

    知人から頼まれホームページを作成しています。 javascriptでプルダウンメニューと打ち出し画像の両方を使うとうまく表示されません。 グローバルナビゲーション(プルダウンメニュー)のすぐ下に打ち出し画像がくるレイアウトになります。 打ち出し画像が邪魔をしてプルダウンのサブメニューが表示されません。 【プルダウンメニュー】 http://www.kriesi.at/wp-content/extra_data/suckerfish_tutorial/step4.html 【打ち出し画像】 http://jonraasch.com/blog/a-simple-jquery-slideshow 上記の2つを組み合わせ、プルダウンの伸びたメニューが打ち出し画像に重なり、動かすことは可能でしょうか? HTMLとCSSの知識はありますが、プログラムの知識はありません。 よろしくお願いします。

  • jQuery プルダウンメニュー

    プルダウンメニューの一部で行き詰っています。 メニュー1のサブメニューが開いている状態で、メニュー2をクリックした時 メニュー1のサブメニューが閉じるようにする(その逆パターンも含む)。 サブメニューにカーソルがある時、メニューはhoverさせないようにする。 ▼html----------------------------------------- <ul id="gNav"> <li>メニュー1 <ul> <li><a href="">サブメニュー1-1</a></li> </ul> </li> <li>メニュー2 <ul> <li><a href="">サブメニュー2-1</a></li> <li>サブメニュー2-2 <ul> <li><a href="">サブメニュー2-2-1</a></li> <li><a href="">サブメニュー2-2-2</a></li> <li><a href="">サブメニュー2-2-3</a></li> </ul> </li> </ul> </li> <li><a href="">メニュー3</a></li> </ul> ▼jQuery----------------------------------------- $(function(){ $("#gNav > li").click(function(){ $(this).children("ul").toggle(); }); $("#gNav > li > ul > li").mouseenter(function(){ $(this).children("ul").show(); }).mouseleave(function(){ $(this).children("ul").hide(); }); $("#gNav > li").hover(function(){ $(this).css("background-color","#ff9900"); },function(){ $(this).css("background-color","#ffcc00"); }); $("#gNav > li > ul > li").hover(function(){ $(this).css("background-color","#99cc66"); },function(){ $(this).css("background-color","#669933"); }); $("#gNav > li > ul >li > ul >li").hover(function(){ $(this).css("background-color","#dddddd"); },function(){ $(this).css("background-color","#eeeeee"); }); }); 宜しくお願いします。

  • ロールオーバー式プルダウンメニューでタグの書き方を教えてください。

    いつもお世話になります。 ホームページのタグのことですが現在、termsmenu.gifという画像の上にマウスを置くと「プルダウンメニュー1」が表示されるように下記タグを書き込んでいます。 <IMG src="termsmenu.gif" onmouseover="pdMenu('Menu1')" width="88" height="26"> 今回、画像の代わりに特定の文字列、たとえば「総合メニュー」の上マウスを置くとすると、「プルダウンメニュー1」が表示されるようにしたいのですが、タグをどのように書けば良いか教えてください。 よろしくお願いします。

  • プルダウンメニューについて

    プルダウンメニューを設置したのですが、下に表示されているメニューがトップ画像の上にはしっかり表示されているのですが、本文からは後ろに回り込んでしまっています。前回作ったWebサイトでは、平常通り機能していたのですが、今回はMovable Typeを使用しているためか、どうしても本文の後ろに回り込んでしまいます。CSSが原因なのか、Javascriptが原因なのかも正直わかりません。どなたか解決策をご存知の方はいらっしゃいますか? よろしくお願いします。

  • プルダウンメニューのcurrentの使い方

    こんばんは。初心者で質問自体説明不足かもしれませんが、 どなたかご教授願えたら幸いです。 CSSでサイトを制作しており、ほぼCSSでできる横型プルダウンメニューを設置しました。 以下の様に「current」を使用して現在ページのメニューボタンの色を変えているのですが、 <ul> <li class="current"><a href="#">menu</a> <ul> <li><a href="#">submenu</a></li> <li><a href="#">submenu</a></li> </ul> </li> </ul> 上記のプルダウンメニューだと、入れ子の子メニューにも「current」 が適用されて、一緒に色が変わってしまいます。 親メニューのボタンの色だけを変えて、 子メニューの色まで変えない事はできるのでしょうか・・・。 ちなみに、currentで表示させる色と、子メニューのロールオーバー時の色は一緒です。 説明不足ですみませんが、どうぞよろしくお願い致します。

    • ベストアンサー
    • CSS