こちらで、初めて質問させていただきます。
実現したいのは、添付画像のように、スライドショーの設定してある画像の上に、メニューにマウスポインタが置かれれば、プルダウンメニューが表示されるようにしたいです。
現状は、jqueryを用いた画像スライドショーにしてから、マウスホバーもしないし、プルダウンメニューも表示されません。
HP作成がほぼ初心者同様でして、にわか仕込みの知識でしかないのでちょっと限界になりこちらで質問させていただきました。
該当のソースコード
HTML,CSS(スライドショー),jquery
<style type="text/css"> #slideshow { position: relative; width: 671px; height: 186px; } #slideshow img { position: absolute; top: 0; left:0; z-index: 8; opacity: 0.0; } #slideshow img.active { z-index: 10; opacity: 1.0; } #slideshow img.last-active { z-index: 9; } </head> <body onload="initRollovers();"> <div align="center"> <div id="navi" style="WIDTH: 665px; HEIGHT: 94px;"> <div align="left"> <ul id="dd"> <li class="mainmenu"> <div align="left"><a class="menu" id="mmenu1" onMouseOver="mopen(1);" onMouseOut="mclosetime();" href="index.html"><img class="imgover" height="38" src="img/top-menu/top.gif" width="131"></a></div> </li> <li class="mainmenu"><a class="menu" id="mmenu2" onMouseOver="mopen(2);" onMouseOut="mclosetime();" href="now.html"><img class="imgover" height="38" src="img/top-menu/tenrankai.gif" width="131"></a> <div class="submenu" id="menu2" onMouseOver="mcancelclosetime()" onMouseOut="mclosetime();"> <a href="now.html"><img class="imgover" height="24" src="img/top-menu/now.gif" width="131"></a><a href="_.html"><img class="imgover" height="24" src="img/top-menu/jyousetu.gif" width="131"></a> <a href="r.html"><img class="imgover" height="24" src="img/top-menu/sukejuru.gif" width="131"></a> <a href="zuroku2010-.html"><img class="imgover" height="24" src="img/top-menu/zuroku.gif" width="131"></a> <a href="past.html"><img class="imgover" height="23" src="img/top-menu/kako.gif" width="130"></a></div> </li> <li class="mainmenu"><a class="menu" id="mmenu3" onMouseOver="mopen(3);" onMouseOut="mclosetime();" href="atrie.html"><img class="imgover" height="38" src="img/top-menu/atorie.gif" width="131"></a> <div align="left"> <div class="submenu" id="menu3" onMouseOver="mcancelclosetime()" onMouseOut="mclosetime();"><a href="atelier.html"><img class="imgover" height="24" src="img/top-menu/atosce.gif" width="131"></a> <a href="__.html"><img class="imgover" height="24" src="img/top-menu/about-atorie.gif"></a></div> </div> </li> <li class="mainmenu"><a class="menu" id="mmenu4" onMouseOver="mopen(4);" onMouseOut="mclosetime();" href="use-guide.html"><img class="imgover" height="38" src="img/top-menu/imfo.gif" width="131"></a> <div class="submenu" id="menu4" onMouseOver="mcancelclosetime()" onMouseOut="mclosetime();"><a href="e.html#infor"><img class="imgover" height="24" src="img/top-menu/time.gif" width="131"></a> <a href="_.html#access"><img class="imgover" height="24" src="img/top-menu/koutu.gif" width="131"></a></div></li> <li class="mainmenu"> <div align="left"><a class="menu" id="mmenu5" onMouseOver="mopen(5);" onMouseOut="mclosetime();" href="_.html"><img class="imgover" height="38" src="img/top-menu/aboutus.gif" width="131"></a></div> </li> </ul> </div> </div> <div id="slideshow" class="top-p"> <img src="topimg/photo1.jpg" width="671" height="187" class="active"> <img src="topimg/photo2.jpg" width="671" height="187" > <img src="topimg/photo3.jpg" width="671" height="187" > <img src="topimg/photo4.jpg" width="671" height="187" > <img src="topimg/photo5.jpg" width="671" height="187" > <img src="topimg/photo6.jpg" width="671" height="187" > </div> <script type="text/javascript"> function slideSwitch() { var $active = $('#slideshow img.active'); if ( $active.length == 0 ) $active = $('#slideshow img:last'); var $next = $active.next().length ? $active.next() : $('#slideshow img:first'); $active.addClass('last-active'); $next.css({opacity: 0.0}) .addClass('active') .animate({opacity: 1.0}, 1000, function() { $active.removeClass('active last-active'); }); } $(function() { setInterval( "slideSwitch()", 3000 ); }); </script>``````ここに言語を入力 ``` CSS(ドロップダウンメニュー) .submenu { /* background: #EAEBD8; */ /* border: 1px solid #5970B2; */ visibility: hidden; position: absolute; z-index: 3; width:131px; height:125px; } ### 試したこと プルダウンメニュー箇所のZindexの数値をスライドショーの画像のzindexの数値より大きく(現状3→11や極端に3→1000など)してみましたがだめでした。 そんな単純な問題でもないようなので、どなたかご教授いただけませんでしょうか。 よろしくお願いいたします。