ドロップダウンメニューの作り方とHTML構造
- CSSだけで作るドロップダウンメニューのHTML構造を示しました。
- 配列からinnerHTMLを使用してサブメニューを生成する際に、正しく動作しない問題が発生しています。
- オカシイ点を指摘するか、よりスマートな解決策を提案しています。
- ベストアンサー
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> で、全く動きません。勉強中の自分には何処がオカシイのかすら分かりません。 何処がオカシイか指摘してください。または、もっとスマートに出来る方法がありましたら、ヒントだけでもご提示いただけたら幸いです。 よろしくお願いいたします。
- kuda_maki
- お礼率88% (8/9)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
A No1です。 ＞～を消した時に、一応フィード読み取りプログラムが動作したので、この一文がミスってる可能性が高いです。 文法上はおかしくないと思います。 スクリプトの一部のみをご提示のようですが、不具合を再現できるミニマムなセットを提示いただければもう少しわかるかもしれません。 単純に、他のスクリプト等をなくした状態でも、ご提示のコードは動作しますか？ 根拠のない推測ですが、A No1にも書きましたように、DOM構築前にスクリプトが実行されていてエラーになっているということはないのでしょうか。 window.onloadの関数として実行するなどで、試してみてみてください。
その他の回答 (1)
- fujillin
- ベストアンサー率61% (1594/2576)
2箇所ほど修正してみてください。 1）siteが配列として定義されていないので、先に var site = []; などで、定義しておく 2）<ul id="submenu">のul◇idの◇部分を半角スペースに それで、DOM ready後にスクリプトが実行されていれば、HTMLに追記されると思います。 追記できても動作しない場合は、CSSが正しく設定されているかどうかも確認をしてみてください。
お礼
回答ありがとうございます。 指摘いただいた記法ミスは、ここに手打ちでコピペしたときにミスったもので、本プログラムでは間違っていませんでした。 あと、DOMreadyの意味が調べてもちょっと難解だったので分からないのですが、挿入場所が間違っているのでしょうか？自分は、GoogleAjaxFeedAPIでRSSを表示するときに、google.load("feeds", "1");の前にこのプログラムを足しました。この位置が悪いのでしょうか？（位置は何箇所か変えてやりましたが、結果はどこも同じ） また、このプログラムを挿入すると本来動いたはずのGoogleAjaxFeedAPIのフィード読み取りプログラムが停止したので、CSSのミスではなくプログラミングが致命的にミスってると思われます。更に、document.getElementById("submenu").innerHTML=links;を消した時に、一応フィード読み取りプログラムが動作したので、この一文がミスってる可能性が高いです。 2日ぐらい、この一文について考えているのですが、どうにもわかりません。jqueryのappendを使ったり試行錯誤はしましたが、動作はすれど結果には反映されずという感じでした。
関連するQ&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
- 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を 順番に読み込ませています。 （先に読み込ませた方のプルダウンメニューが決まって動作しません）
- ベストアンサー
- JavaScript
- 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
- IE8でli:hoverが効かない
Window7 IE8を使っています。 ホームページにｃｓｓを使ったドロップダウンメニューを導入したいのですが、 li:hoverが効きません。 ｃｓｓかhtmlが間違っているのかと思い、念のためいろいろなサイトから ｃｓｓドロップダウンメニューの例文をもらってきて 書き込んでみましたが、どうしてもサブメニューが表示されません。 たとえば、 【css】 /* メインメニュー */ #menu ul { display:block; list-style-type: none; margin:0; padding:0; } /* サブメニュー1段目 */ #menu ul ul{ display:none; position:absolute; top:100%; left:0; } /* サブメニュー2段目以降 */ #menu ul ul ul { top:0; left:100%; } /* リスト */ #menu li { float:left; } #menu li li { clear:both; } #menu li:hover { position:relative; } #menu li:hover > ul { display: block; } 【html】 <body> <div id="menu"> <ul> <li><a href="#">menu1</a> <ul> <li><a href="#">submenu1</a></li> <li><a href="#">submenu2</a></li> <li><a href="#">submenu3</a> <ul> <li><a href="#">submenu3-1</a></li> <li><a href="#">submenu3-2</a></li> <li><a href="#">submenu3-3</a></li> </ul> </li> </ul> </li> <li><a href="#">menu2</a> <ul> <li><a href="#">submenu4</a></li> <li><a href="#">submenu5</a></li> </ul> </li> <li><a href="#">menu3</a> <ul> <li><a href="#">submenu6</a></li> <li><a href="#">submenu7</a></li> <li><a href="#">submenu8</a></li> <li><a href="#">submenu9</a></li> </ul> </li> </ul> </div> </body> メニューにカーソルをもってきても、 サブメニューが表示されません。 原因や回避方法を教えていただけないでしょうか。 よろしくお願いします。
- ベストアンサー
- HTML
- 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; } ------------------------------------------ 以上、宜しくお願いいたします。
- 締切済み
- JavaScript
- 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();
- 締切済み
- JavaScript
- jQueryでドロップダウンメニューができない
jQueryの参考書をみながらドロップダウンメニューを実装しようとしたのですが うまくいきません。 締切が迫って焦っております。 <ul class="main"> <li><a href="index.html">メインA</a></li> <li><a href="concept.html">メインA</a></li> <li><a href="service.html">メインA</a> <ul class="sub"> <li><a href="">サブ1</a></li> <li><a href="">サブ2</a></li> <li><a href="">サブ3</a></li> <li><a href="">サブ4</a></li> <li><a href="">サブ5</a></li> </ul> </li> <li><a href="faq.html">メインA</a></li> <li><a href="access.html">メインA</a></li> </ul> ｃｓｓは .main { clear:both; width:830px; height:42px; margin:0 auto; list-style-type:none; } ul .main li { width:166px; height:42px; float:left; position:relative; background:url(../../img/index/btn.png); } .main li a { display:block; width:100%; height:100%; padding:10px 0 0 40px; font-size:14px; font-weight:bold; color:#333333; text-decoration:none; line-height:1.5em; } ul .sub{ display:none; } scriptは <script type="text/javascript"> $(function(){ $("ul.main li").hover(function(){ $(">ul:not(:animated)",this).slideDown("fast"); }, function(){ $(">ul",this).slideUp("fast"); }) }) </script> です。いろいろ試行錯誤したのですがドロップダウンメニュ－が表示されず 困っています。何か見落としがあるのでしょうか。よろしくお願いいたします。
- ベストアンサー
- HTML
- ドロップダウンメニューについて
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>
- 締切済み
- ホームページ作成ソフト
- 後付けでドロップダウンメニューを作りたい
現在画像で作った横並びのナビゲーションメニューがあります。 そこへマウスポントすることでドロップダウンのメニュー（出来れば半透明）を追加したいのですが うまくいきません。 既存のコードは以下の通りです。 --------------------------------------------------------------------- 【css】 #globalnavi{ margin: 0; padding: 0; width: 994px; height: 50px; background-image: url(../image/button/button-bg.png); background-repeat: no-repeat; } #globalnavi ul{ list-style-type: none; margin: 0; padding: 0; } #globalnavi li{ text-indent: -9999px; float:left; width: 142px; margin: 0; padding: 0; } #globalnavi a{ display: block; width: 100%; height: 50px; background-image: url(../image/button/button.png); background-repeat: no-repeat; } #menu1 a{background-position: 0 0;} #menu2 a{background-position: -142px 0;} #menu3 a{background-position: -284px 0;} #menu4 a{background-position: -426px 0;} #menu5 a{background-position: -568px 0;} #menu6 a{background-position: -710px 0;} #menu7 a{background-position: -852px 0;} #globalnavi a:hover{ background-image: url(../image/button/button.png); background-repeat: no-repeat; } #menu1 a:hover{background-position: 0 -50px;} #menu2 a:hover{background-position: -142px -50px;} #menu3 a:hover{background-position: -284px -50px;} #menu4 a:hover{background-position: -426px -50px;} #menu5 a:hover{background-position: -568px -50px;} #menu6 a:hover{background-position: -710px -50px;} #menu7 a:hover{background-position: -852px -50px;} 【html】 <nav id="globalnavi"> <ul> <li id="menu1"><a href="menu1.html" title="メニュー1">メニュー1</a></li> <li id="menu2"><a href="menu2.html" title="メニュー2">メニュー2</a></li> <li id="menu3"><a href="menu3.html" title="メニュー3">メニュー3</a></li> <li id="menu4"><a href="menu4.html" title="メニュー4">メニュー4</a></li> <li id="menu5"><a href="menu5.html" title="メニュー5">メニュー5</a></li> <li id="menu6"><a href="menu6.html" title="メニュー6">メニュー6</a></li> <li id="menu7"><a href="menu7.html" title="メニュー7">メニュー7</a></li> </ul> </nav> --------------------------------------------------------------------- どうぞ宜しくお願い致します。
- 締切済み
- その他([技術者向] コンピューター)
- ページを開いた直後のサブメニューを非表示
現在、個人で利用するサイトをJqueryを導入してリニューアルしようと計画しているのですが、 添付画像のように新しいページを開いた直後は、左の青いサブメニューが必ず表示されてしまいます。 ("#menu ul li ul:first").hide();を入れると 消えることには消えたのですが、 それ以後サブメニューが表示されなくなってしまいました。 どなたかお分かりの方、ご助言をお願い致します。 参考までに以下にHTMLとＣＳＳのコードを記載します。 (HTML) <html> <head> </head> <body> <div id="content"> <div id="menuWrapper" class="menuWrapper bg1"> <ul class="menu" id="menu"> <li class="bg1" style="background-position:0 0;"> <a id="bg1" href="#">Our Passion</a> <ul class="sub1" style="background-position:0 0;"> <li><a href="#">Submenu 1</a></li> <li><a href="#">Submenu 2</a></li> <li><a href="#">Submenu 3</a></li> </ul> </li> <li class="bg1" style="background-position:-266px 0px;"> <a id="bg2" href="#">Our Brands</a> <ul class="sub2" style="background-position:-266px 0;"> <li><a href="#">Submenu 1</a></li> <li><a href="#">Submenu 2</a></li> <li><a href="#">Submenu 3</a></li> </ul> </li> <li class="last bg1" style="background-position:-532px 0px;"> <a id="bg3" href="#">Contact</a> <ul class="sub3" style="background-position:-266px 0;"> <li><a href="#">Submenu 1</a></li> <li><a href="#">Submenu 2</a></li> <li><a href="#">Submenu 3</a></li> </ul> </li> </ul> </div> </div> </body> </html> (CSS) .menuWrapper{ font-family: "Trebuchet MS", Arial, sans-serif; font-size: 15px; font-style: normal; font-weight: normal; text-transform:uppercase; letter-spacing: normal; line-height: 1.45em; position:relative; margin:20px auto; height:542px; width:797px; background-position:0 0; background-repeat:no-repeat; background-color:transparent; } ul.menu{ list-style:none; width:797px; } ul.menu > li{ float:left; width:265px; height:542px; border-right:1px solid #777; background-repeat:no-repeat; background-color:transparent; } ul.menu > li.last{ border:none; } .bg1{ background-image: url(../images/1.jpg); } .bg2{ background-image: url(../images/2.jpg); } .bg3{ background-image: url(../images/3.jpg); } ul.menu > li > a{ float:left; width:265px; height:50px; margin-top:450px; text-align:center; line-height:50px; color:#ddd; background-color:#333; letter-spacing:1px; cursor:pointer; text-decoration:none; text-shadow:0px 0px 1px #fff; } ul.menu > li ul{ list-style:none; float:left; margin-top:-180px; width:100%; height:110px; padding-top:20px; background-repeat:no-repeat; background-color:transparent; } ul.menu > li ul li{ display:none; } ul.menu > li ul.sub1{ background-image:url(../images/bg1sub.png); } ul.menu > li ul.sub2{ background-image:url(../images/bg2sub.png); } ul.menu > li ul.sub3{ background-image:url(../images/bg3sub.png); } ul.menu > li ul li a{ color:#fff; text-decoration:none; line-height:30px; margin-left:20px; text-shadow:1px 1px 1px #444; font-size:11px; } ul.menu > li ul.sub1 li{ display:block; } ul.menu > li ul li a:hover{ border-bottom:1px dotted #fff; }
- ベストアンサー
- JavaScript
お礼
ありがとうございます！！ window.onload = function(){} でスクリプトを囲った所、無事動作致しました。こんなんで4日も悩むなんてアホみたいですね・・・ でも、おかげでイベントハンドラの意味がようやく分かった気がします。