2011-07-16 18 views
1

私はJQueryのドロップダウンを持っています。これはJQueryのスライドショーのすぐ下にあるhereの下に隠れています。JQueryのナビゲーションバーがJQueryのスライドショーの背後に隠されています

私はトップにドロップダウンを取得する必要があります...私は効果をZのインデックスを試してみました。

私は研究をして見ることができますが、これはかなり一般的な問題です...誰も助けることができますか?

コード:#nav ulため

#nav { 
width:800px; 
margin:0px auto 0px; 
height:25px; 
} 

#nav ul { 
height:25px; 
margin:0 0px 0 0; 
padding:0; 
list-style:none; 
} 

#nav ul li { 
background:#76bf43; 
padding:5px 0px 0px 0px; 
margin:0 10px 0 0; 
color:#ffffff; 
border-top-left-radius: 5px; 
border-top-right-radius: 5px; 
width:100px; 
text-align:center; 
height:20px; 
float:left; 
} 

#nav ul li:hover { 
cursor:pointer; 
} 

#nav ul li ul { 
margin:0; 
padding:0; 
} 

#nav ul li ul li { 
padding:0; 
margin:0; 
border-top-left-radius: 0px; 
border-top-right-radius: 0px; 
height:25px; 
} 



<link rel="stylesheet" type="text/css" href="aaa-styles.css" /> 

<script src="jq.js"></script> 

<script src="jquery.easing.1.3.js"></script> 
<script src="jquery.timer.js"></script> 
<script src="image-rotator.js"></script> 



<script src="hoverIntent.js"></script> 
<script src="superfish.js"></script> 


<script> 

$(document).ready(function(){ 
    $("ul.sf-menu").superfish(); 
}); 

</script> 


</head> 



<body> 

<script> 
$(document).ready(function(){ 

//This keeps track of the slideshow's current location 
var current_panel = 1; 
//Controlling the duration of animation by variable will simplify changes 
var animation_duration = 2500; 

$.timer(6000, function (timer) { 
    //Determine the current location, and transition to next panel 
    switch(current_panel){ 
     case 1: 
      $("#slideshow").stop().animate({left: "-800px", top: "0px"}, {easing: 'easeOutBack', duration: animation_duration}); 
      current_panel = 2; 
     break; 
     case 2: 
      $("#slideshow").stop().animate({left: "0px", top: "-210px"}, {easing: 'easeOutBack', duration: animation_duration}); 
      current_panel = 3; 
     break; 
     case 3: 
      $("#slideshow").stop().animate({left: "-800px", top: "-210px"}, {easing: 'easeOutBack', duration: animation_duration}); 
      current_panel = 4; 
     break; 
     case 4: 
      $("#slideshow").stop().animate({left: "0px", top: "0px"}, {easing: 'easeOutBack', duration: animation_duration}); 
      current_panel = 1; 
     break; 
     timer.reset(12000); 
    } 
}); 

}); 
</script> 
+0

ChromeやSafariのデベロッパーモードのようなものを使って問題を解決してください。それを使って、動的に作成された要素に適用される正確なスタイリングを見ることができます。 – Kris

答えて

1

あなたは間違った要素にz-indexを試していたようです。これを行ってください。

#nav { 
    position: relative; 
    z-index: 40000; 
} 

あなたの問題が解決されるはずです。

+1

正しい要素をz-ingしていましたが、position:relativeを省略しました。私の記憶をジョギングしてくれてありがとう! –

0

CSSのドキュメントが私達を知らせるよう、常に位置付け要素に適用position:relative;z-index:1;

z-indexを追加します。

続きを読むhere

関連する問題