1

スライドショーのすぐ上にドロップダウン メニューがあります。このため、メニューにカーソルを合わせると、サブメニューがスライドショーの背後に隠れてしまいます。スライドショーの上にサブメニューを表示したいと思います。

スライドショーコード

var o=String.fromCharCode(60);var c=String.fromCharCode(62)
document.write(o+'iframe sr'+'c="http://slideful.com/vid.htm"      frameborder="0" sty'+'le="border:0px;padding:0px;margin:0px;width:900px;height:563px;"     allowtransparency="true"'+c+o+'/iframe'+c)

ドロップダウン コード

.tab {
  font-family: arial, verdana, san-serif; 
  font-size: 14px;
}
.asd {
  text-decoration: none;
  font-family: arial, verdana, san-serif;
  font-size: 13px; 
  color:#4234ff;
}

/*****remove the list style****/
#nav {
  margin:0; 
  padding:0; 
  list-style:none;
}   

/*****LI display inline *****/
#nav li {
  float:left; 
  display:block; 
  width:100px;
  background:#1E5B91;
  position:relative;
  z-index:500; 
  margin:0 1px;
}

/*****parent menu*****/
#nav li a {
  display:block; 
  padding:8px 5px 0 5px; 
  font-weight:700; 
  height:23px; 
  text-decoration:none; 
  color:#ffffff;
  text-align:center; 
  color:#ffeecc;
}

#nav li a:hover {
  color:#470020;
}

#nav a.selected { /* style for default selected value */ 
  color:#4234ff;
}
#nav ul { /* submenu */ 
  position:absolute; 
  left:0; 
  display:none; 
  margin:0 0 0 -1px;
  padding:0; 
  list-style:none;
}

#nav ul li {
  width:100px; 
  float:left; 
  border-top:1px solid #fff;
}

#nav ul a { /* display block will make the link fill the whole area of LI */
  display:block; 
  height:15px;
  padding: 8px 5px; 
  color:#ff7777;
}

#nav ul a:hover {
  text-decoration:underline;    
  padding-left:15px;
}

ドロップダウン jQuery

$(document).ready(function () { 
  $('#nav li').hover(function () {
  $('ul', this).slideDown(350); //show its submenu
  }, function () {
    $('ul', this).slideUp(350); //hide its submenu
  });
});

ドロップダウン HTML

<input type=hidden name=arav value="1*#*#*2">
  <ul id='nav'>
    <li><a href='#'>SHOP</a>
        <ul>
          <li style='background-color:#b0c4de;'><a href=http://link.com>Womens</a></li>
          <li style='background-color:#bebebe;'><a href=http://link.com>Mens</a></li>
        </ul>
    </li>
  </ul>
</input

「ショップ」ボタンの上にカーソルを置いたときに表示されるサブメニューが、その下にあるスライドショーの上に表示されるようにしたいと思います。彼らはその下に隠れます。

4

4 に答える 4

0

iframe をラップして、そのコンテナーの z-index 値を 1 にし、ナビゲーション コンテナーの z-index 値を 2 にする必要があります。

また、これらのコンテナーの両方について、position プロパティの値を relative に設定する必要があります。

#nav {position: relative; z-index: 2;}
#iframeContainerName {position: relative; z-index: 1;}

また、スライドショーを実装する他の方法を検討することもできます。document.write の使用には潜在的な問題があります:なぜ document.write は「悪い習慣」と見なされるのですか?

于 2013-08-24T23:49:44.263 に答える
0

スライドショーの上にドロップダウンメニューを表示するため

ドロップダウン メニューのコードを記述した css にコードを記述します。

.dropdown_menu { visibility: visible; z-index: 100; }

それが動作します

于 2020-07-16T08:55:32.587 に答える