プルダウンメニューが画像の上にくるようにしたい

こちらで、初めて質問させていただきます。
実現したいのは、添付画像のように、スライドショーの設定してある画像の上に、メニューにマウスポインタが置かれれば、プルダウンメニューが表示されるようにしたいです。

現状は、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など）してみましたがだめでした。
そんな単純な問題でもないようなので、どなたかご教授いただけませんでしょうか。
よろしくお願いいたします。

m.ts10806

2018/11/26 05:37

タグにある「Java」はどのような関係があるのでしょうか。「Java」と「JavaScript」は全く違うものなのでそのあたりは区別をきちんとつけられたほうが良いです。またコードは全てマークダウンのcode機能を利用してください。コードブロックは任意の個数設置ができますので。

行動規範の内容に同意します

回答1件

「質問への追記・修正の依頼」でも指摘されていますが、質問タグが「JAVA」になっています。

CSS
1#slideshow {
2	z-index: 1;
3}
4```**動くサンプル：**[https://jsfiddle.net/yre9fsm5/](https://jsfiddle.net/yre9fsm5/)
5
6---
7
8また、`align="left"`等は廃止されているので、CSSで正しく指定しましょう。
9
10【<div>: コンテンツ分割要素 - HTML: HyperText Markup Language | MDN】
11[https://developer.mozilla.org/ja/docs/Web/HTML/Element/div#Attributes](https://developer.mozilla.org/ja/docs/Web/HTML/Element/div#Attributes)
12> `align` 属性は廃止されたので、使用しないでください。