• ベストアンサー

ドロップダウンメニュー

ドロップダウンメニューを作りました。普段はCSSで非表示にしてマウスオーバーするとJavascriptで表示するようにしています。 その表示するタグはDivタグでAbsolute指定しています。 その中はli（リスト）でdisplay:block;とwidth100%などをつけて余白もリンクにしました。 そのDivタグの領域の下には文字が書かれています（重ねている） で、そのかさなっている状態でそのDivタグの領域のリンクにマウスをあてるとポインタが文字選択のマーク（重なっている下の文字が選択される）になってしまうときがあります。この場合どのような解決方法がありますでしょうか？

  • HTML
  • 回答数1
  • ありがとう数0

質問者が選んだベストアンサー

  • ベストアンサー
  • steel_gray
  • ベストアンサー率66% (1052/1578)
回答No.1

＞その中はli（リスト）でdisplay:block;とwidth100%などをつけて余白もリンクにしました。 確認ですが display:blockをつけたのは li にですか？ もし、そうなら a に付けないと余白をリンクにする、は、うまくいってないです。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. HTML

関連するQ&A

  • ドロップダウンメニューについて

    apycomでhttp://apycom.com/menus/1-yellow-green.htmlの ドロップダウンメニューをダウンロードして設定しているのですが、サブメニューのリンク文字の変更方法が分からなくて困っています。 サブメニューの背景を変更したのでリンクの文字をもっとハッキリ見える色に変更したいです。 マウスが乗った時の文字の色も変更できません。 昨日から色々やってるのですがどうしても解決できないのでお聞きしました。 よろしくお願いします。 /** ********************************************* * Prototype of styles for horizontal CSS-menu * @data 30.06.2009 ********************************************* * (X)HTML-scheme: * <div id="menu"> * <ul class="menu"> * <li><a href="#" class="parent"><span>level 1</span></a> * <ul> * <li><a href="#" class="parent"><span>level 2</span></a> * <ul><li><a href="#"><span>level 3</span></a></li></ul> * </li> * </ul> * </li> * <li class="last"><a href="#"><span>level 1</span></a></li> * </ul> * </div> ********************************************* */ /* menu::base */ div#menu { height:41px; background : transparent url(main-bg.png) repeat-x scroll 0% 0%; } div#menu ul { margin: 0; padding: 0; list-style: none; float: left; } div#menu ul.menu { padding-left: 30px; } div#menu li { position: relative; z-index: 9; margin: 0; padding: 0 5px 0 0; display: block; float: left; } div#menu li:hover >ul { left: -2px; } div#menu a { position: relative; z-index: 10; height: 41px; display: block; float: left; line-height: 41px; text-decoration: none; font: normal 12px Trebuchet MS; } div#menu a:hover, div#menu a:hover span { color: #fff; } div#menu li.current a {} div#menu span { display: block; cursor: pointer; background-repeat: no-repeat; background-position: 95% 0; } div#menu ul ul a.parent span { background-position:95% 8px; background-image : url(item-pointer.gif); } div#menu ul ul a:hover.parent span { background-image : url(item-pointer-mover.gif); } /* menu::level1 */ div#menu a { padding: 0 10px 0 10px; line-height: 30px; color : rgb(56, 56, 56); } div#menu span { margin-top: 5px; }/**@replace#1*/ div#menu li { background : transparent url(main-delimiter.png) no-repeat scroll 98% 4px; } div#menu li.last { background: none; } /* menu::level2 */ div#menu ul ul li { background: none; } div#menu ul ul { position: absolute; top: 38px; left: -999em; width: 163px; padding: 5px 0 0 0; background : rgb(179, 221, 81) none repeat scroll 0% 0%; margin-top:1px; } div#menu ul ul a { padding: 0 0 0 15px; height: auto; float: none; display: block; line-height: 24px; color : rgb(56, 56, 56); } div#menu ul ul span { margin-top: 0; padding-right: 15px; _padding-right: 20px; color : rgb(56, 56, 56); } div#menu ul ul a:hover span { color: #fff; } div#menu ul ul li.last { background: none; } div#menu ul ul li { width: 100%; } /* menu::level3 */ div#menu ul ul ul { padding: 0; margin: -38px 0 0 163px !important; margin-left:172px; color: #FFFFFF; } /* colors */ div#menu ul ul ul { background: rgb(41,41,41); } div#menu ul ul ul ul { background: rgb(38,38,38); } div#menu ul ul ul ul { background: rgb(35,35,35); } /* lava lamp */ div#menu li.back { background : transparent url(lava.png) no-repeat scroll right -44px !important; background-image : url(lava.gif); width: 13px; height: 44px; z-index: 8; position: absolute; margin: -1px 0 0 -5px; } div#menu li.back .left { background : transparent url(lava.png) no-repeat scroll left top !important; background-image : url(lava.gif); height: 44px; margin-right: 8px; } 【html】 <div id="menu"> <ul class="menu"> <li><a href="#"><span>Home</span></a> <li><a href="#" class="parent"><span>商品紹介</span></a> <ul> <li><a href="#"><span>コンクリート</span></a> <li><a href="#"><span>木材</span></a> <li><a href="#"><span>アクセサリー</span></a> <li><a href="#"><span>砂</span></a> <li><a href="#"><span>フード</span></a>

  • ドロップダウンメニュー

    ドロップダウンメニュについてお伺いします。下記、サンプルがWebにあったのですが メニュー1、メニュー2、メニュー3をマウスオーバーした時に選択肢が表示されます。 しかしながら横に最大3個未満の場合、余分なスペースができてしまいます。 この余分なスペースを出さないで存在する選択肢の分だけ表示表示させるようなことは できるのでしょうか。 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> #header-wrapper { height: 60px; } #header { height: 60px; } #site-title { padding: 10px 0 0 0; } h5 { margin-top: 20px; } #main { clear: left; margin: 20px auto; padding: 5px 20px; width: 900px; } h3 { font-size: 20px; } #sample ul { list-style:none; } #menu li { position: relative; float: left; margin: 0; padding: 5px; width: 200px; height: 20px; border: solid 1px #ccc; font-weight: bold; } #menu li:hover { color: #fff; background: #333; } #menu li ul { display: none; position: absolute; top: 30px; left: -1px; padding: 5px; width: 600px; background: #eee; border: solid 1px #ccc; } #menu li ul li { float:left; margin: 0; padding: 0; width: 200px; border: none; } #menu li ul li a { display: inline-block; width: 200px; height: 20px; } #menu li ul li a:hover { background: #999; color: #fff; } </style> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.7");</script> <script type="text/javascript"> $(function() { $("#menu li").hover(function() { $(this).children('ul').show(); //$('#menu li ul').css('width', '200px'); }, function() { $(this).children('ul').hide(); }); }); </script> </head> <body class="archive date col-2-right fixed loggedin browser-chrome"> <div id="page"> <div id="main"> <div id="sample"> <ul id="menu"> <li id="menu1">メニュー1 <ul> <li><a href="#">サブメニュー1-1</a></li> </ul> </li> <li id="menu2">メニュー2 <ul> <li><a href="#">サブメニュー2-1</a></li> <li><a href="#">サブメニュー2-2</a></li> </ul> </li> <li id="menu3">メニュー3 <ul> <li><a href="#">サブメニュー3-1</a></li> <li><a href="#">サブメニュー3-2</a></li> <li><a href="#">サブメニュー3-3</a></li> <li><a href="#">サブメニュー3-4</a></li> </ul> </li> </ul> </div> </div><!--main--> </div><!--page--> </body> </html>

    • 締切済み
    • CSS
  • CSSのみでのドロップダウンメニューについて

    下のサイトを参考にドロップダウンメニューを作成したのですが、 ドロップダウンで出てくるサブメニューにマウスを移動した際、一番上のメニューのhoverの効果が消えてしまい困っています。 どうすれば、サブメニューにマウスを移動しても一番上のメニューのhoverの効果を残せるようにできるのでしょうか？ 【参考にしたサイト】 http://weboook.blog22.fc2.com/blog-entry-359.html （このサイトでは綺麗に動いています。。） 【私のコード】 <!DOCTYPE html> <html> <head> <style type="text/css"> /** １階層目 **/ #menu { list-style-type: none; } #menu > li { position: relative; float: left; text-align: center; } #menu > li > a { display:inline-block; margin-left:20px; line-height: 1; } #menu > li > a:hover { background:lightpink; } /** ２階層目 **/ #menu > li > ul { position: absolute; top: 100%; left: 0; list-style-type: none; } #menu > li > ul > li { position: relative; overflow: hidden; height: 0; width: 200px; text-align:left; } #menu > li:hover > ul > li { overflow: visible; height:2em; } </style> </head> <body> <div> <ul id="menu"> <li><a href="#">menu 1</a></li> <li><a href="#">menu 2</a> <ul> <li><a href="#">sub menu 1</a></li> <li><a href="#">sub menu 2</a></li> </ul> </li> </ul> </div> </body> </html> 宜しくお願い致します。

    • 締切済み
    • CSS
  • ドロップダウンメニューについて質問です。

    横並びのナビゲーションに更にドロップダウンをつけたいのですがうまくいかないので質問させていただきます。 メニューはそれぞれバッググラウンドで使ってます。 横並びのナビげーションはできました。 ロールオーバー時の画像の入れ替えもできました。 コレクション部分のドロップダウンがうまくいきません。 ドロップダウンで3つでるようにしたいと思うのですが 現状のHTML&CSSを記載します。 よろしくお願いいたします。 html <div id="navi"> <ul> <li class="nav_03"> <ul class="sub"> <li class="nav_001"></li> <li class="nav_002"></li> <li class="nav_003"></li> </ul> </li> </ul> </div> CSS #navi { height: 10px; width: 650px; margin-top: 34px; margin-left: 154px; margin-bottom: 75px; } #navi li { float:left; list-style-type: none; } .nav_03 a { height: 10px; width: 54px; background-image: url(../images/navi/catalog.jpg); background-repeat:no-repeat; display:block; text-indent:-9999px; margin-right: 42px; } .nav_03 a:hover { height: 10px; width: 54px; background-image: url(../images/navi/catalog_r.jpg); background-repeat:no-repeat; display:block; text-indent:-9999px; margin-right: 42px; #navi ul.sub li { float: none; height: 10px; width: 54px; list-style-type: none; } #navi ul.sub li a { background: none; height: 10px; width: 54px; } #navi ul.sub .nav_001 li a:hover { background-image: url(../images/navi/tops_r.jpg); height: 10px; width: 54px; display: block; background-repeat: no-repeat; position: absolute; z-index: 10; } #navi ul.sub .nav_001 li a{ background-image: url(../images/navi/tops.jpg); height: 10px; width: 54px; display: block; background-repeat: no-repeat; } /*サブメニューを、カーソルが乗るまで非表示にしておく設定*/ ul .nav_04 li ul { display: none; } /*サブメニューを、カーソルが乗った時に表示する設定*/ #navi ul li:hover .sub .nav_001{ display: block; position: absolute; z-index: 100; background-image: url(../images/navi/tops.jpg); height: 10px; width: 54px; display: block; float:left; line-height: 180%; } #navi ul li:hover .sub .nav_002{ display: block; position: absolute; z-index: 100; background-image: url(../images/navi/bottoms.jpg); height: 10px; width: 54px; display: block; float:left; line-height: 180%; }}

  • CSSのみで作る横ドロップダウンメニュー

    教えてください。白旗です。 クライアントの指示でCSS＋xhtmlのみでサイトを作成していますが、横並びのプルダウンメニューで行き詰りました。 IE6以外のブラウザでは正常な表示をされるのですが、IE６のみへんてこりんになってしまいます。 下記ソースで、メニューAにマウスを乗せてドロップダウンをさせると、メニューBが右に動きます。 これに2日間はまってます。 よろしくお願いします。 ---ソース--- 【html】 <div id="gnavi_container"> <div id="gnavi"> <ul> <li class="gmenu02_off" onmouseover="this.className='gmenu02_on'" onmouseout="this.className='gmenu02_off'"><a href="#"><img src="img/1.jpg" width="122" height="25" alt="" onmouseover='this.src="img/3.jpg"' onmouseout='this.src="img/1.jpg"' /></a> <ul class="gmenu_sub"> <li><a href="#"><img src="img/4.jpg" width="138" height="19" alt="" /></a></li> </ul> </li> <li class="gmenu03_off" onmouseover="this.className='gmenu03_on'" onmouseout="this.className='gmenu03_off'"><a href="#"><img src="img/2.jpg" width="81" height="25" alt="" onmouseover='this.src="img/2.jpg"' onmouseout='this.src="img/2.jpg"' /></a> </li> </ul> 　</div> </div> 【css】 img{ border:0; } div#gnavi_container{ position : relative; z-index:100; width:800px; height:25px; text-align:left; } div#gnavi ul { margin: 0; padding: 0; list-style: none; } div#gnavi li { float : left; margin : 0; padding : 0; } .gmenu_sub li{ overflow:visible: } .gmenu02_off{ height:25px; width:122px; overflow : hidden; } .gmenu02_on{ width:122px; overflow :visible; } .gmenu03_off{ height:25px; width:81px; overflow : hidden; } .gmenu03_on{ width:81px; overflow :visible; } div#gnavi ul.gmenu_sub{ margin : 0; padding : 0; } div#gnavi ul.gmenu_sub li{ margin : 0; padding : 0; float : none; clear : both; }

  • JavaScriptでドロップダウンメニュー

    を自力で実装したいのですがうまくいきません。 気になっているのは ddObj.onmouseoverと ddObj.onmouseout の上記２つのイベントハンドラ内の　変数iが親スコープでi==0であるはずなのに イベントハンドラ内だとなぜか i == 1となっているのです。 JavaScriptの練習のために書いています。 Jqueryなどは使いなくないのです。 どなたかJSにお詳しい方ご教授ください。 <title>JavaScript テスト</title> <script type="text/javascript"> <!-- try{ //ファイルがすべて読み込まれたら実行される処理 var onloadMethod = function onloadMethod(){ //初期状態ではドロップダウンメニューは表示されていない。 var defaultMenu = document.getElementsByTagName("dl"); for (var i = 0; i < defaultMenu .length; i++){ defaultMenu[i].style.position ="relative"; } var drop = document.getElementsByTagName("dt"); var ddObj = document.getElementsByTagName("dd"); for( var i = 0; i < drop.length; i++){ alert(i); //まずカテゴリー・メニューの簡易的なデザインを決める。 drop[i].style. width = "200px"; drop[i].style. height = "50px"; drop[i].style.backgroundColor = "#FF99FF"; //次に書くカテゴリー・メニューのマウスオーバーイベントハンドラを指定する。 alert(i); drop[i].onmouseover = function(){ alert(i); //まずはここではメニューリストを表示させるだけの処理を書く //各メニューリストはddタグ要素の中のliタグなのでまずdd要素の表示 ddObj.item(i).style.position = "absolute"; ddObj.item(i).style.top = "50px"; ddObj.item(i).style.visibility = ""; ddObj.item(i).style.backgroundColor="red"; }; drop[i].onmouseout = function(){ //alert(i); //カーソルのマウスオーバーが外れたらddタグ要素を非表示にする。 ddObj.item(i).style.visibility = "hidden"; ddObj.item(i).style.backgroundColor="blue"; //alert("00"); }; alert(i); } /* var list = document.getElementsByTagName("li"); for(var i = 0; i < list.length ; i++){ document.getElementsByTagName("li").item(i).onmouseover = function(){ drop.onmouseover(); }; document.getElementsByTagName("li").item(i).onmouseout = function(){ drop.onmouseout(); }; } */ }; //すべての要素の読み込み完了後の実行 window.addEventListener("load" ,onloadMethod,false); }catch(e){ document.write(e); } --> </script> </head> <body> <p>対象のドロップダウンメニュー(※dl要素が一つのカテゴリー・メニュー)</p> <dl class="dropdown" title="two"> <dt id="ddheader-two">メニューのカテゴリー名</dt> <dd id="ddcontent-two"> <ul> <li style="width:240px;height:30px;background-color:gray;"><a href="http://yahoo.co.jp">カテゴリ内メニュー01</a></li> <li style="width:240px;height:30px;background-color:gray;"><a href="http://yahoo.co.jp">カテゴリ内メニュー02</a></li> <li style="width:240px;height:30px;background-color:gray;"><a href="http://yahoo.co.jp">カテゴリ内メニュー03</a></li> <li style="width:240px;height:30px;background-color:gray;"><a href="http://yahoo.co.jp">カテゴリ内メニュー04</a></li> <li style="width:240px;height:30px;background-color:gray;"><a href="http://yahoo.co.jp">カテゴリ内メニュー05</a></li> </ul> </dd> </dl> <p>文字列</p> </body> </html>

  • ドロップダウンメニューのメニュー項目の外部管理方法

    お世話になります。 http://jsajax.com/DropDownMenuArticle286.aspx 上記のサイトにあるドロップダウンメニューのサンプルはトップメニューは<li>タグ、ドロップダウンメニューは<div>タグで宣言するようになっているのですが、今回はサーバーがPHPとSSIが使えないのでincludeができないのです、そこでcssの外部ファイルにメニューデータを格納してそれを渡したいと思っているのですがそういった方法ってありませんか？

  • ドロップダウンメニューの方法を教えてください

    ■ドロップダウンメニューでサブメニューが横並びで出るようにしたいと思っています。 HTMLは下記のように記述しています。どのようにJavascriptを記述すると良いのか教えてください。よろしくお願いします。 【html】 <div id="menuber"> <a href="#"><IMG src="test/m1.gif" width="101" height="20" border="0" align="left"></a> <div class="hiddenmenus"> <span id="sub"> <a href="#"><IMG src="test/sub1.gif" width="101" height="20" border="0" align="left"></a> <a href="#"><IMG src="test/sub2.gif" width="101" height="20" border="0" align="left"></a> <a href="#"><IMG src="test/sub3.gif" width="101" height="20" border="0" align="left"></a> <a href="#"><IMG src="test/sub4.gif" width="101" height="20" border="0" align="left"></a> </span> </div> </div> 【CSS】 .hiddenmenus {position:absolute; top: 20px; left: 0px;} #sub1 { visibility: hidden; }

  • ドロップダウンメニューの位置調整ができません

    body設定は以下の通り body{ margin: 0; padding: 0; text-align: center; 　　　～ 　　min-width: 900px; } このbodyにナビゲーションを設置して ドロップダウンメニューを配置しようとしていますが位置合わせができずに困っています 基本的な質問ですが、教えて下さい サブメニュー（ドロップダウンメニュー）のsccの記載は以下のように記載しました div#subMenu01 {position:absolute; top: 100px; left: 75px;} div#subMenu02 {position:absolute; top: 100px; left: 150px;} 結果、body枠からでなく、ブラウザ枠からの75px,150pxになってしまいます。 position:relativeにしても上下位置は変わりますが左右は変化しません。 どうしたらbody内で位置調整できるのでしょうか？

    • 締切済み
    • CSS
  • CSSとJavaScriptを使ってドロップダウンメニュー

    こんにちわ。 ＩＥ６、ＩＥ７上で動くＨＴＭＬを作成しています。 スタイルシートとJavaScriptを使ってドロップダウンメニューを実現しようと思ってます。ＩＥ６では問題ありませんがＩＥ７で次の現象がッ発生します。 ブラウザ内で表示されている文字を反転させて、親メニュー上をマウスオーバーしていくと、マウスがメニューから離れたあとも、サブメニューの残像が残ります。 以下にサンプルソースを記載いたします。 親メニューはてすと、てすと2。 ”てすと”メニューには、サブ１、サブ２、 ”てすと2”メニューには、サブ３、サブ４のサブメニューを構成させています。 ＩＥ７でもマウスアウトさせた際、サブメニューの残像が残らないようにするには、どのような修正を加えるべきでしょうか？ 原因と対策方法、ご教授ください。 test.html --------------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link rel=stylesheet type=text/css href=default.css> <title>TEST Homepage</title> </head> <body> <div id='menu'> <ul> <li><a target='_top' href='a.html'>てすと</a> <ul><li><a target='_top' href='b.html'>サブ１</a> <li><a target='_top' href='c.html'>サブ２</a></li> </li> </ul> </li> <li><a target='_top' href='a.html'>てすと2</a> <ul><li><a target='_top' href='b.html'>サブ３</a> <li><a target='_top' href='c.html'>サブ４</a></li> </li> </ul> </li> </ul> </div> <script type='text/javascript'> sfHover = function() { var sfEls = document.getElementById("menu").getElementsByTagName("LI"); for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { this.className+=" sfhover"; } sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp(" sfhover\\b"), ""); } } } if (window.attachEvent) window.attachEvent("onload", sfHover); </script> <br> <br> <br> <hr> ＩＥ７の場合、ここをマウスカーソル反転させててすと１→てすと２メニューをhoverさせると！てすと１のサブメニューの残像が残る。 ＩＥ６は問題なし。 ------------------------------------------ CSSスタイルシート ------------------------------------------ #menu { width: 750px; margin: 0 auto; padding-top: 11px; white-space: nowrap; } #menu ul { padding: 0; margin: 0; margin-left:auto; margin-right:auto; list-style: none; } #menu li { float: left; background: #87CEFA; margin-right: 3px; border-top: 4px solid #00aaaa; } #menu li:hover, #menu li.sfhover { background: #BFFF00; } #menu li ul { position: absolute; width: auto; left: -999em; border:2px solid white; border-top:none; } #menu li:hover ul, #menu li.sfhover ul { left: auto; } #menu li ul li { float: none; margin-right: 0px; border-top:2px solid white;; text-align:left; } #menu a { display: block; width: auto; padding: 20px 5px 5px 5px; color: #000000; } #menu a:hover { color: #000000; } #menu li ul li a { padding: 5px 5px 5px 5px; } ------------------------------------------ 以上、宜しくお願いいたします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する