• 締切済み

javascriptとCSSを使ってのドロップダウンメニュー作成

CSSとJavaScriptを使って ドロップダウンメニューを作ろうと思っているのですが JavaScriptがうまく作動していないためか FireFoxでは表示されるのですが IE6では動きません。 ご教授お願い致します。 ■index.html <head> <script src="javascript/menu.js" type="text/javascript"></script> </head> <div id="nav"> <ul> <li id="category"><a href="～">category</a> <ul> <li><a href="～">Overview</a></li> <li><a href="～">Overview</a></li> </ul> <ul> <li id="category"><a href="～">category</a> <ul> <li><a href="～">Overview</a></li> <li><a href="～">Overview</a></li> </ul> </div> ■menu.js function menuHover() {var menuItems = d.getElementById("nav").getElementsByTagName("li"); for (var i = 0, miL = menuItems.length; i < miL; i++) { menuItems[i].onmouseover = function() { this.className = "mnhover"; } menuItems[i].onmouseout = function() { this.className = ""; } window.onload = menuHover();

みんなの回答

  • nipox
  • ベストアンサー率32% (10/31)
回答No.4

関係なくて申し訳ありませんが、 FireFoxというブラウザはありません。 Firefoxです。 これは、公式Webにも書いてあります、

takah1r0
質問者

お礼

わかりました。以後気をつけます。

  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.3

とりあえず、javascriptのユーザー関数menuHover() は}の数がおかしいですね？ それとdとか宣言してないオブジェクトつかっているし ケアレスミスが目立ちます。以下でどうでしょうか？ よくよくご自身でチェックなさることをお勧めします。 function menuHover(){ var menuItems = document.getElementById("nav").getElementsByTagName("li"); for (var i = 0; i < menuItems.length; i++) { menuItems[i].onmouseover = function() { this.className = "mnhover"; } menuItems[i].onmouseout = function() { this.className = ""; } } }

takah1r0
質問者

お礼

わかりました。 ありがとうございます。 もういちど見てみます。

  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.2

css自体が記載されていないですが・・・

takah1r0
質問者

補足

申し訳ありません。 CSSになります。 #nav { position:absolute; height:30px; width:710px; top:40px; border:1px solid red; z-index:100; } #nav ul { background: url() no-repeat left top; height: 30px; margin: 0 auto; position: relative; width:100%; } #nav li { float: left; height: 30px; } #search{ width:150px; background:url(../img/search.jpg) no-repeat left top; text-indent:-3000px; border:1px solid blue; } #category { width: 150px; border:1px solid #ccc; } #maker { width: 150px; border:1px solid #ccc; } #worry { width: 150px; border:1px solid #ccc; } #nav a { border: none; color: #666; display: block; font-weight: normal; height: 47px; padding: 0 5px; } #nav a { background:url(../img/category_off.jpg) no-repeat; } #nav #category a { background-position: left top; } #nav #maker a { background-position: left top; } #nav #worry a { background-position: left top; } #nav a:hover, #nav li:hover a,#nav li.mnhover a { background: none !important; } #category a { background-position: left top; } #maker a { background-position: left top; } #worry a { background-position: left top; } #nav li ul { background: transparent url(../i/bgsubmenu.png) repeat-x; border-bottom: 5px solid; border-top: 2px solid; border-color: #777; height: auto; left: -9999px; margin: -5px 0 0 8px; padding: 1px 0; position: absolute; z-index: 3; } #nav li:hover ul,#nav li.mnhover ul { left: auto; } #nav li#worry:hover ul,#nav li#worry.mnhover ul { left: auto; right: 100px; } #nav li ul li,#nav li ul li a { height: auto; margin: 0; padding: 0; text-indent: 0; } #nav li ul li a { border: 1px #fff; border-style: none solid; } #nav li ul,#nav li ul li { width: 150px; } #nav li:hover ul li a,#nav li.mnhover ul li a,#nav li ul li a { background: none; display: block; font-size: .9em; padding: 8px 22px 8px 29px; color: #444; } #nav li li { background: url(../i/blsubmenu.gif) no-repeat left top; } #nav li li.mnhover,#nav li li:hover { background: #5079C5 url(../i/bgsubmenu_h.gif) repeat-y 100% 0; } #nav li ul li a:hover { background: url(../i/blsubmenu_h.gif) no-repeat left top !important; color: #666; }

  • partita
  • ベストアンサー率29% (125/427)
回答No.1

タグの構造がおかしいですよ。

takah1r0
質問者

お礼

すいません。 修正する際に削除しておりました。 もう一度お願い致します。 <div id="nav"> <ul> <li id="search">商品を探す</li> <li id="category"><a href="*" title="*">カテゴリーから探す</a> <ul> <li><a href="*" title="*">カテゴリー一覧</a></li> <li><a href="*" title="*">Web Applications</a></li> <li><a href="*" title="*">Websites</a></li> <li><a href="" title="*">eCommerce</a></li> <li><a href="*" title="*">Standards Compliance</a></li> <li><a href="*" title="*">Search Engines</a></li> </ul> </li> <li id="maker"><a href="*">maker</a> <ul> <li><a href="*" title="*">Overview</a></li> <li><a href="*" title="*">Hosting Accounts</a></li> <li><a href="*" title="*">Domain Management</a></li> </ul> </li> <li id="worry"><a href="*" title="*">worry</a> <ul> <li><a href="*" title="*">Overview</a></li> <li><a href="*" title="*">eMail Marketing</a></li> <li><a href="*" title="*">Document Management</a></li> <li><a href="*" title="*">Lead Management</a></li> <li><a href="*" title="*">Raffle Applications</a></li> <li><a href="*" title="*">Call Centre Apps</a></li> <li><a href="*" title="*">Sample Tracking</a></li> </ul> </li> </ul> </div>

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

関連するQ&A

  • 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; } ------------------------------------------ 以上、宜しくお願いいたします。

  • mootoolsを使ったドロップダウンメニューを同じページ内に複数使用したい

    javascript初心者です・・。 下記のURLからmootools 一式をDLしてドロップダウンのメニューを 設置しました。 http://www.css-lecture.com/log/javascript/043.html ↑ 1つ目のメニューは問題なく設置できました。 今回私がやりたい事は、同じページ内の違う場所に ドロップダウンメニューをもうひとつ設置したいのですが・・ どこを修正すれば良いかわからず困っています。 今現在の状況としては、 ・上記サイトでDLしたmooltools一式を、コピーして 　単純に2セット用意してみました。 ・htmlを見ると、classではなくIDで組まれていたので、 　2セット目のjs、cssを1セット目とは違うID名に変更してみました。 と、これだけで動くような簡単なものでは無かったのですね・・。 納期も迫り、大変困っています。。 どなたか助言をいただけたらと大変助かります。。 現在制作中のプルダウンの部分のhtml載せておきます。 <div id="menu-container"> <ul id="drop_down_menu"> <li id="btn01"><a href="#"><img src="../common/img/gnavi01_off.jpg" alt="トップ" width="116" height="56" /></a></li> <li class="menu" id="btn02"><a href="#">カテゴリ1</a> <ul class="links"> <li><a href="#">コンテンツ01</a></li> <li><a href="#">コンテンツ02</a></li> <li><a href="#">コンテンツ03</a></li> </ul> </li> <li class="menu" id="btn03"><a href="#">カテゴリ2</a> <ul class="links"> <li><a href="#">コンテンツ04</a></li> <li><a href="#">コンテンツ05</a></li> <li><a href="#">コンテンツ06</a></li> </ul> </li> <li class="menu" id="btn04"><a href="#">カテゴリ3</a> <ul class="links"> <li><a href="#">コンテンツ07</a></li> </ul> </li> <li id="btn05"><a href="#">カテゴリ4</a></li> </ul> </div> ↑これが1つ目のプルダウンメニューの箇所で、 同じように2つ目のメニューもid名を変えて組みました。 mootoolsのjsは、 header内に外部jsとして1つ目、2つ目のプルダウンメニュー分のjsを 順番に読み込ませています。 （先に読み込ませた方のプルダウンメニューが決まって動作しません）

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

    ドロップダウンメニュについてお伺いします。下記、サンプルが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
  • 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>

  • Javascriptでプルダウンメニューを作りましたが関数化できません

    <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> function foldmenu(i){ var i; for(j=1;j<=5;j++){ if(i==j) $('#sc'+j).toggle('normal'); else $('#sc'+j).hide(); } $(function(i){ $('#c'+i).click(function(){ for(j=1;j<=5;j++){ if(i==j) $('#sc'+j).toggle('normal'); else $('#sc'+j).hide(); } }); }); } </script> <div id="c1" onClick="foldmenu('1')">1</div> <ul id="sc1"> <li><a href="#">入力画面1-1</a></li> <li><a href="#">入力画面1-1</a></li> </ul> <div id="c2" onClick="foldmenu('2')">2</div> <ul id="sc2"> <li><a href="#">入力画面2-1</a></li> <li><a href="#">入力画面2-2</a></li> </ul> <div id="c3" onClick="foldmenu('3')">3</div> <ul id="sc3"> <li><a href="#">入力画面3-1</a></li> <li><a href="#">入力画面3-2</a></li> </ul> <div id="c4" onClick="foldmenu('4')">4</div> <ul id="sc4"> <li><a href="#">入力画面4-1</a></li> <li><a href="#">入力画面4-2</a></li> </ul> <div id="c5" onClick="foldmenu('5')">5</div> <ul id="sc5"> <li><a href="#">入力画面5-1</a></li> <li><a href="#">入力画面5-2</a></li> </ul> と関数化しましたがうまく動きません。 初期状態では1の部分が開く。 それ以降はクリックした部分が開き開いていた部分は閉じるという感じにしたいです。 縦長のプルダウンメニューです。 たてに1から5が並んでいて、1をクリックすると１と2の間に1の子カテゴリーが表示されます。 困っています。教えてください。

  • JavaScriptで折りたたみメニュー

    現在、JavaScriptを利用して折りたたみメニューを作成しました。 2つの項目の下にそれぞれ下層メニューがあり、各項目をクリックするごとに下層メニューが開いたり閉じたりできる状態なのですが、 このどちらかの項目をクリックしたとき、その項目の下層メニューは表示されるが、もう一方の項目の下層メニューは閉じる。というようにするにはどうすればよいでしょうか？（両方の下層メニューが同時に開いている状態が無いように。） よろしくお願いいたします。 【XHTML】 <ul> <li><a href="javascript:exMenu('treeMenu1')">項目1</a> <ul id="treeMenu1" style="display:none"> <li><a href="#">項目1-1</a></li> <li><a href="#">項目1-2</a></li> <li><a href="#">項目1-3</a></li> </ul> </li> <li><a href="javascript:exMenu('treeMenu2')">項目2</a> <ul id="treeMenu2" style="display:none"> <li><a href="#">項目2-1</a></li> <li><a href="#">項目2-2</a></li> <li><a href="#">項目2-3</a></li> </ul> </li> </ul> 【JavaScript】 function exMenu(tName) { tMenu = document.getElementById(tName).style; if (tMenu.display == 'none') tMenu.display = "block"; else tMenu.display = "none"; }

  • ドロップダウンメニューを作るこのCSSどこが変？

    お世話になります。 Webサイトのメニューボタンにマウスオンすると下部にダウンメニューが飛び出す仕様をCSSで作りたいと思っています。添付ファイルのように、ボタン画像の下にまたメニュー項目（background-imageがついてくる）が展開していくよくある仕様です。 ネットでの情報を参考にしながら、書いたソースが以下のものですが、 問題は(1)ダウンメニューにしたいのにむしろ上部へ表示される (2)テキスト分しか表示されない、きちんと画像全体を表示させたい！ 個人的にもいろいろ試行錯誤してみましたが、どうも分かりませんでした。 もしかしたら、ものすごく基本的なところでつまずいているかもしれませんが、どうかご容赦ください。 もしよろしければアドバイスお願いします。 HTML--- <div id="global_nav"> <ul> <li><a href="#"><img src="images/button_06.gif" alt="TOPボタン" class="btn"/></a></li> <li><a href="#"><img src="images/button_07.gif" alt="Aボタン" class="btn"/></a> <ul> <li><a href="#">会社概要</a></li> <li><a href="#">営業所</a></li> </ul> </li> <li><a href="#"><img src="images/button_08.gif" alt="Bボタン" class="btn"/></a></li> <li><a href="#"><img src="images/button_08.gif" alt="Cボタン" class="btn"/></a></li> <li><a href="#"><img src="images/button_08.gif" alt="Dボタン" class="btn"/></a></li> <li><a href="#"><img src="images/button_08.gif" alt="Eボタン" class="btn"/></a></li> </ul> </div> CSS--- #global_nav { float:right; width:720px; margin:0; padding-right:15px; } #global_nav img { float:left; display:block; border:0; } #global_nav ul { list-style:none; margin:0; padding:0; } #global_nav li { min-width:120px; white-space:nowrap; float:left; } #global_nav ul ul { display:none; position:absolute; z-index:10; padding-top:2px; } #global_nav ul ul a { font-family:"ＭＳ Ｐゴシック", "ヒラギノ角ゴ Pro W3", sans-serif; font-size:0.75em; color:#FFF; background-image:url(../images/dawnmenu_button.gif); height:40px; width:120px; text-decoration:none; text-align:center; padding:20px 10px 0 10px; } #global_nav li li { clear:left; position:relative; width:100% } #global_nav ul li:hover > ul { display:block; }

    • ベストアンサー
    • 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
  • innerHTMLでドロップダウンメニューの作り方

    CSSだけで作るドロップダウンメニューのHTMLの構造って↓みたいな感じらしいんですが、 <ul id="dropmenu"> <li><a href="#">メニュー</a> <ul　id="submenu"> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> </ul> </li> </ul> これのサブメニューを配列からinnerHTMLで生成するときに、 var links=""; site[0]={link:'http;www',title:'アマゾン'}; site[1]={link:'http;www',title:'紀伊国屋'}; site[2]={link:'http;www',title:'ヤフーオークション'}; for(var m = 0; m < site.length; m++){ links += '<li><a href=" '+site[m]['link']+' ">'+site[m]['title']+'</a></li>'; } document.getElementById("submenu").innerHTML=links; <html> <body> <ul id="dropmenu"> <li><a href="#">メニュー</a> <ul　id="submenu"> </ul> </li> </ul> </body> </html> で、全く動きません。勉強中の自分には何処がオカシイのかすら分かりません。 何処がオカシイか指摘してください。または、もっとスマートに出来る方法がありましたら、ヒントだけでもご提示いただけたら幸いです。 よろしくお願いいたします。

  • ドロップダウンのサブメニューを画面の左右いっぱい

    メインのナビゲーションでマウスを重ねた時に下にサブメニューを表示させるのですが、画面左右いっぱいにバックカラーを入れたいのですが、できません。 バックカラーはＡＡＡの幅になります。 ul.nav li ul.sub のwidthに数値を入れれば右側に広がりますが左右いっぱいにはなりません。 マウスを“ＡＡＡ”に重ねても文字の色は変化しません。 jQueryは初めてで、マニュアル本を見ながらの作成の為、悪戦苦闘です。 よろしくお願いします。 【ｈｔｍｌ】 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script> $(function(){ $("ul.sub").hide(); $("ul.nav li").hover(function(){ $("ul:not(:animated)",this).slideDown("fast"); }, function(){ $("ul",this).slideUp("fast"); }); }); </script> </head> <div class="wrapper"> <nav> <ul class="nav"> <li><a href="#">AAA</a></li> <ul class="sub"> <li><a href="#">AAA-1</a></li> 　　　　<li><a href="#">AAA-2</a></li> 　　　　 <li><a href="#">AAA-3</a></li> </ul> <li><a href="#">BBB</a></li> <li><a href="#">CCC</a></li> <li><a href="#">DDD</a></li> <li><a href="#">EEE</a></li> </ul> </nav> </div> 【ＣＳＳ】 .wrapper { position: relative; width: 960px; margin-left:auto; margin-right:auto; } ul.nav { width: 960px; margin: 0; margin-left:auto; margin-right:auto; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; padding: 10px 0; ul.nav li { border-left: 1px solid #ccc; float: left; position:relative } ul.nav li:first-child { border: 0; padding-left:150px; } ul.nav li a{ display: block; padding:10px 30px; color: #333; text-decoration: none; } ul.nav li a:hovre{ color:#009F00; } ul.nav:after { height:0; visibility:hidden; content:"."; display:block; clear:both; } ul.nav li ul.sub { position: absolute; top:30px; width:100％; background-color:#808080; } ul.nav li ul.sub li{ float:left; } ul.nav li ul.sub:after { height:0; content:"."; display:block; clear:both; }

    • 締切済み
    • CSS

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する