JS幻灯片重叠CSS下拉图像菜单

好吧，我有点让人看见寻求帮助，但我真的需要在这一个你的意见，因为我有一个最后期限？JS幻灯片重叠CSS下拉图像菜单

我有一个形象下拉菜单，但我的幻灯片重叠。我在css中放置了z-index和position属性，但它不起作用。

您可能会看到该网站在http://preview.tinyurl.com/7hwcr4u

尝试将鼠标悬停在店里菜单上。应该有一个男人，女人等下拉列表。

这里尝试如下：

<!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> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<link href="css/style.css" rel="stylesheet" type="text/css" /> 
<link rel="stylesheet" href="menu.css"> 
<link href="Slideshow/style.css" rel="stylesheet" type="text/css" /> 
</head> 

<body> 
<div id="header"> 

    <div id="header-links">Sign Up • Login | 0 Items • Checkout 
    </div> 

    <div id="logo"> 
    </div> 

    <div id="navigation"> 
    <div id="menu"> 
<ul class="tabs"> 
    <li><a href="#"><img src="images/menuhome1.gif"></a> 
    <li class="hasmore"><a href="#"><img src="images/menushop1.gif"></a> 
     <ul class="dropdown"> 
      <li><a href="#"><img src="images/menushopmens2.gif"></a></li> 
      <li><a href="#"><img src="images/menushopwomens2.gif"></a></li> 
      <li><a href="#"><img src="images/menushoplimitededition2.gif"></a></li> 
      <li><a href="#"><img src="images/menushopsale2.gif"></a></li> 
      <li><a href="#"><img src="images/menushophotpicks2.gif"></a></li> 
     </ul> 
    </li> 

    <li class="hasmore"><a href="#"><img src="images/menuparticipate.gif"></a> 
<!--  <ul class="dropdown"> 
      <li><a href="#">Topic 1</a></li> 
      <li><a href="#">Topic 2</a></li> 
      <li><a href="#">Topic 3</a></li> 
      <li class="last"><a href="#">Topic 4</a></li> 
     </ul> --> 
    </li> 

    <li class="hasmore"><a href="#"><img src="images/menucommunity1.gif"></a> 
<!--  <ul class="dropdown"> 
      <li><a href="#">Topic 1</a></li> 
      <li><a href="#">Topic 2</a></li> 
      <li><a href="#">Topic 3</a></li> 
      <li class="last"><a href="#">Topic 4</a></li> 
     </ul> --> 
    </li> 

    <li class="hasmore"><a href="#"><img src="images/menuhelp1.gif"></a> 
<!--  <ul class="dropdown"> 
      <li><a href="#">Topic 1</a></li> 
      <li><a href="#">Topic 2</a></li> 
      <li><a href="#">Topic 3</a></li> 
      <li class="last"><a href="#">Topic 4</a></li> 
     </ul> --> 
    </li> 

</ul> <!-- class=tabs*/ --> 
</div> 

<script type="text/javascript" src="menu.js"></script> 
    </div> 

</div> <!--header-links closing div --> 


<!-- start slideshow --> 
<div id="slider"> 



<!--slideshow content --> 

    <ul id="slideshow"> 
     <li> 
      <h3> </h3> 
      <span>Slideshow/photos/img1.jpg</span> 
      <p> </p> 
      <a href="#"><img src="Slideshow/thumbnails/slidenewthumb.jpg" alt="Orange Fish" /></a> 
     </li> 
    <li> 
      <h3> </h3> 
      <span>Slideshow/photos/img1.jpg</span> 
      <p> </p> 
     <img src="Slideshow/thumbnails/slidefeatthumb.jpg" alt="Sea Turtle" /> 
      </li> 
     <li> 
      <h3> </h3> 
      <span>Slideshow/photos/img1.jpg</span> 
      <p> </p> 
      <a href="#"><img src="Slideshow/thumbnails/slidepoputhumb.jpg" alt="Red Coral" /></a> 
     </li> 
     <li> 
      <h3> </h3> 
      <span>Slideshow/photos/img1.jpg</span> 
      <p> </p> 
      <a href="#"><img src="Slideshow/thumbnails/slidenewsthumb.jpg" alt="Coral Reef" /></a> 
     </li> 
     <li> 
      <h3> </h3> 
      <span>Slideshow/photos/img1.jpg</span> 
      <p> </p> 
      <img src="Slideshow/thumbnails/slidesubmitthumb.jpg" alt="Blue Fish" /> 
     </li> 

    </ul> 

<!-- start slideshow output --> 
<div id="wrapper"> 
     <div id="fullsize"> 
      <div id="imgprev" class="imgnav" title="Previous Image"></div> 
     <div id="imglink"></div> 
      <div id="imgnext" class="imgnav" title="Next Image"></div> 
      <div id="image"></div> 
      <div id="information"> 
       <h3></h3> 
       <p></p> 
      </div> 
    </div> 
<div id="thumbnails"> 
      <div id="slideleft" title="Slide Left"></div> 
      <div id="slidearea"> 
       <div id="slider"></div> 
      </div> 
    <div id="slideright" title="Slide Right"></div> 
     </div> 
    </div> 
<script type="text/javascript" src="Slideshow/compressed.js"></script> 
<script type="text/javascript"> 
    $('slideshow').style.display='none'; 
    $('wrapper').style.display='block'; 
    var slideshow=new TINY.slideshow("slideshow"); 
    window.onload=function(){ 
     slideshow.auto=true; 
     slideshow.speed=5; 
     slideshow.link="linkhover"; 
     slideshow.info="information"; 
     slideshow.thumbs="slider"; 
     slideshow.left="slideleft"; 
     slideshow.right="slideright"; 
     slideshow.scrollSpeed=4; 
     slideshow.spacing=12; 
     slideshow.active="#000"; 
     slideshow.init("slideshow","image","imgprev","imgnext","imglink"); 
    } 
</script> 

</div> 

<!-- end slideshow -->

和幻灯片/ style.css中：

body {margin:0; background:#fff; padding:5px; font:11px Verdana,Arial} 
#slideshow {list-style:none; color:#fff;} 
#slideshow span {display:none} 
#wrapper {width:872px; margin:50px auto; display:none; z-index: 1; position: relative;} 
#wrapper * {margin:0; padding:0} 
#fullsize {position:relative; width:872px; height:496px; padding:2px; background:#fff} 
#information {position:absolute; bottom:0; width:500px; height:0; background: ; color:#fff; overflow:hidden; z-index:200; opacity:.7; filter:alpha(opacity=70)} 
#information h3 {padding:4px 8px 3px; font-size:14px} 
#information p {padding:0 8px 8px} 
#image {width:500px} 
#image img {position:absolute; z-index:25; width:auto} 
.imgnav {position:absolute; width:25%; height:306px; cursor:pointer; z-index:150} 
#imgprev {float: left; background:url(images/scroll-left.gif) left center no-repeat; left:-50px; top: 50px;} 
#imgnext {float: right; right: -50px; background:url(images/scroll-right.gif) right center no-repeat; top: 50px;} 
#imglink {position:absolute; height:306px; width:100%; z-index:100; opacity:.4; filter:alpha(opacity=40)} 
.linkhover {background:url(images/link.gif) center center no-repeat} 
#thumbnails {margin-top:15px} 
#thumb {margin-right: 10px;} 
#slideleft {float:left; width:0px; height:133px;} 
#slideleft:hover {background-color:#333} 
#slideright {float:right; width:0px; height:133px;} 
#slideright:hover {background-color:#333} 
#slideshowwrapper { width: 900px;} 
#slidearea {float:left; position:relative; width:870px; margin-left:0px; height:133px; overflow: visible;} 
#slider {position:absolute; left:0; height:81px} 
#slider img {cursor:pointer; border:1px solid #fff; padding:2px}

下面Menu.css：

/* hack reset (for production, use Yahoo! reset CSS) 
*************************/ 

* 
{ 
    margin: 0; 
    padding: 0; 
} 

/* body 
*************************/ 

body 
{ 
    font: 14px/21px Georgia, serif; 
    color: #370707; 
    background: none; 
} 

/* links 
*************************/ 

a:link, a:visited, a:hover, a:active 
{ 
    text-decoration: none; 
} 

/* inline elements 
*************************/ 

strong 
{ 
    font-weight: bold; 
} 

/* tabs 
*************************/ 

ul.tabs 
{ 
    display: table; 
    margin: 0; 
    padding: 0; 
    list-style: none; 
    position: relative; 
} 

ul.tabs li 
{ 
    margin: 0; 
    padding: 0; 
    list-style: none; 
    display: table-cell; 
    float: left; 
    position: relative; 
} 

ul.tabs a 
{ 
    position: relative; 
    display: block; 
} 

/* dropdowns 
*************************/ 

ul.dropdown 
{ 
    margin: 0; 
    padding: 0; 
    display: block; 
    position: absolute; 
    z-index: 1000; 
    top: 100%; 
    width: 250px; 
    display: none; 
    left: 0; 
} 

ul.dropdown ul.dropdown 
{ 
    top: 0; 
    left: 95%; 

} 

ul.dropdown li 
{ 
    margin: 0; 
    padding: 0; 
    float: none; 
    position: relative; 
    list-style: none; 
    display: block; 
    z-index: 1900; 
} 

ul.dropdown li a 
{ 
    display: block; 
} 


/* menu-specifc 
*************************/ 

#menu 
{ 

    z-index: 999; 
    top: 0; 
    left: 0; 
    line-height: 40px; 
    font-family: "Arial Narrow"; 
    color: #1b1a1a; 
    font-size: 20px; 
    float: left; 
    height: 30px; 
    width: 700px; 
    margin-top: 65px; 
    text-align: center; 
    text-transform: uppercase; 
    font-weight: bold; 
    position: relative; 
} 

#menu ul 
{ 
    margin: 0 auto; 
} 

#menu ul li.hasmore 
{ 
} 

#menu ul li h4 
{ 
    margin: 0; 
} 

#menu ul li h4 a 
{ 
    font-size: 14px; 
    color: #000; 
    font-weight: bold; 
    padding: 0 15px; 
} 

#menu ul li a 
{ 
    color: #9b2021; 
    padding-left: 4px; 
} 

#menu ul li a img 
{ 
    vertical-align: middle; 
} 

#menu ul li a:hover 
{ 

} 

#menu ul li a span 
{ 
    display: block; 
    padding: 0 15px 0 11px; 
} 

#menu ul li a:hover span 
{ 
    background: url(images/topselectionright.png) top right; 
} 

#menu ul.dropdown 
{ 
    padding: 5px; 
    overflow:hidden; 
    width: 290px; 
} 

#menu ul.dropdown li a 
{ 
    line-height: 60px; 
    overflow: hidden; 
    height: 60px; 
} 

#menu ul.dropdown li.last a 
{ 
    border-bottom-width: 0; 
} 

#menu ul.dropdown li a:hover 
{ 
    background: url(images/menuarrow.png) no-repeat left center; 
} 

#menu ul li h4 a:hover 
{ 
    background-image: none; 
}

而且......全球的style.css

#header { 
    height: 160px; 
    width: 8720px; 
    margin-right: auto; 
    margin-left: auto; 
} 
#header-links { 
    font-family: "DejaVu Sans"; 
    font-size: 10px; 
    float: right; 
    width: 100%; 
    color: #1b1a1a; 
    text-align: right; 
} 
#logo { 
    float: left; 
    height: 100px; 
    width: 200px; 
    background-attachment: scroll; 
    background-color: black; 
    background-repeat: no-repeat; 
    float: left; 
    margin-top: 40px; 
} 
#navigation { 
/* see menu.css */ 
} 
#slider { 
    z-index: 0; 
    position:relative; 
    margin-right: auto; 
    margin-left: auto; 
} 
#indemandclothes { 
    height: 300px; 
    width: 960px; 
    margin-top: 30px; 
    margin-right: auto; 
    margin-left: auto; 
    font-family: "Arial Narrow"; 
    font-size: 12px; 
} 

#indemandclothesbox{font-family: Arial, Helvetica, sans-serif, "Trebuchet MS"; 
        font-size: 10px; 
        width: 100px; 
        padding-right: 20px; 
        float: left;} 

#home-block-container { 
    width: 960px; 
    margin-right: auto; 
    margin-left: auto; 
    margin-top: 20px; 
} 

#home-block1 { 
    float: left; 
    height: 400px; 
    width: 310px; 
    color: #1b1a1a; 
    padding-top: 10px; 
    padding-right: 10px; 
    padding-bottom: 10px; 
    font-family: "Arial Narrow"; 
    font-size: 12px; 
    border-right: 1px solid #CCCCCC; 
} 

#home-block1title{font-size: 24px; 
        font-family: Arial, Helvetica, sans-serif, "Trebuchet MS"; 
        font-weight: bold; 
        } 


#home-block2 { 
    float: left; 
    height: 400px; 
    width: 310px; 
    color: #1b1a1a; 
    padding-top: 10px; 
    padding-right: 5px; 
    padding-bottom: 10px; 
    padding-left: 5px; 
    font-family: "Arial Narrow"; 
    font-size: 12px; 
} 
#home-block3 { 
    float: left; 
    height: 400px; 
    width: 200px; 
    color: #1b1a1a; 
    padding-top: 10px; 
    padding-right: 5px; 
    padding-bottom: 10px; 
    padding-left: 5px; 
    font-family: "Arial Narrow"; 
    font-size: 12px; 
} 
#socialmedia { 
    width: 960px; 
    margin-right: auto; 
    margin-left: auto; 
    font-family: "Arial Narrow"; 
    font-size: 12px; 
    float: none; 
    margin-top: 20px; 
    height: auto; 
    font-weight:bold; 
} 
#footer { 
    font-family: "Arial Narrow"; 
    font-size: 11px; 
    padding-top: 10px; 
    padding-bottom: 10px; 
    min-height: 150px; 
    width: 960px; 
    margin-top: 100px; 
    margin-right: auto; 
    margin-left: auto; 
    clear: both; 
    margin-bottom: 0px; 
    border-top-width: 1px; 
    border-top-style: solid; 
    border-right-style: none; 
    border-bottom-style: none; 
    border-left-style: none; 
    border-top-color: #333; 
} 

#socialbox{float:left; 
      width: 110px; 
      height: 60px; 
      border: solid thin #ccc; 
      margin-right: 15px;} 

#emailbox{float:left; 
      width: 300px; 
      height: 60px; 
      border: solid thin #ccc; 
} 

#footer1 { 
    font-family: "Arial Narrow"; 
    font-size: 11px; 
    color: #1b1a1a; 
    text-align: center; 
    height: 20px; 
    width: 960px; 
    margin-right: auto; 
    margin-left: auto; 
    clear: both; 
    margin-bottom: 0px; 
    display: block; 
} 
#body { 
    font-family: "Arial Narrow"; 
    font-size: 14px; 
    float: none; 
    width: 960px; 
    color: #1b1a1a; 
    margin-top: 20px; 
    margin-right: auto; 
    margin-left: auto; 
    min-height: 500px; 
} 
#productbodycontainer { 
    font-family: "Arial Narrow"; 
    font-size: 14px; 
    float: none; 
    color: #1b1a1a; 
    min-height: 500px; 
    width: 960px; 
    margin-top: 20px; 
    margin-right: auto; 
    margin-left: auto; 
    clear: both; 
} 
#productbody { 
    font-family: "Arial Narrow"; 
    font-size: 12px; 
    float: left; 
    color: #1b1a1a; 
    height: 400px; 
    width: 649px; 
    padding-right: 10px; 
} 
#productheading { 
    float: left; 
    height: 50px; 
    width: 649px; 
    color: #1b1a1a; 
    padding-bottom: 10px; 
    padding-right: 10px; 
} 

#productbody2 { 
    font-family: "Arial Narrow"; 
    font-size: 12px; 
    float: right; 
    color: #1b1a1a; 
    height: 400px; 
    width: 649px; 
    padding-right: 10px; 
} 
#productheading2 { 
    float: right; 
    height: 50px; 
    width: 649px; 
    color: #1b1a1a; 
    padding-bottom: 10px; 
    padding-right: 10px; 
} 

#comments { 
    font-family: "Arial Narrow"; 
    font-size: 14px; 
    float: left; 
    color: #1b1a1a; 
    min-height: 300px; 
    width: 649px; 
    padding-left: 10px; 
} 
#shopheadingcontainer { 
    float: left; 
    height: 30px; 
    width: 649px; 
} 
#shoplandingpageheading { 
    font-family: "DejaVu Sans"; 
    font-size: 12px; 
    font-weight: bold; 
    text-transform: uppercase; 
    color: #FFF; 
    background-image: url(../images/shopheadingbg.png); 
    float: left; 
    height: 30px; 
    width: 157px; 
    padding-left: 10px; 
    padding-top: 3px; 
    background-repeat: no-repeat; 
    background-attachment: scroll; 
} 


#sidebar-container { 
    float: right; 
    min-height: 500px; 
    width: 289px; 
} 

#sidebar-container2 { 
    float: left; 
    min-height: 500px; 
    width: 289px; 
    margin-right: 5px; 
} 

#sidebar { 
    float: left; 
    width: 270px; 
    padding-left: 20px; 
    min-height: 150px; 
    margin-top: -10px; 
    text-align:justify; 
    padding-bottom: 5px; 
    font-family:Geneva, Arial, Helvetica, sans-serif; 
    font-size: 12px; 
} 

#sidebar2 { 
    float: left; 
    width: 270px; 
    padding-left: 60px; 
    min-height: 100px; 
    margin-top: -10px; 
    text-align:justify; 
    padding-bottom: 5px; 
    font-family:Geneva, Arial, Helvetica, sans-serif; 
    font-size: 12px; 
} 

#sidebarchoices {border: thin solid #333; width:80px; height: 30px; float: left; margin: 5px; text-align: center; padding-top: 10px;} 

#sidebarchoicessize {border: thin solid #333; width:25px; height: 20px; float: left; margin: 5px; text-align: center; padding-top: 10px;} 

#sidebar-heading { 
    font-family: Arial, Helvetica, sans-serif, "Trebuchet MS"; 
    font-size: 12px; 
    font-weight: bold; 
    text-transform: uppercase; 
    color: #ffffff; 
    float: right; 
    height: 35px; 
    width: 272px; 
    background-attachment: scroll; 
    background-image: url(../images/sidebarbackground.png); 
    background-repeat: no-repeat; 
    vertical-align: middle; 
    margin-right: -10px; 
    padding-top: 3px; 
    padding-left: 3px; 
} 

#sidebarcolors{width: 15px; height: 15px; float: left; margin: 3px; border: 1px solid #CCCCCC;} 
#seeall { 
    font-family: "DejaVu Sans"; 
    font-size: 11px; 
    font-weight: bold; 
    background-attachment: scroll; 
    background-image: url(../images/seeallbg.png); 
    background-repeat: no-repeat; 
    float: right; 
    height: 30px; 
    width: 59px; 
    color: #FFF; 
    padding-top: 3px; 
    padding-left: 3px; 
} 
#featuredproducts { 
    float: left; 
    height: 300px; 
    width: 649px; 
    padding-top: 10px; 
    padding-left: 5px; 
    clear: both; 
} 

#productfeature { 
    font-family: "Arial Narrow"; 
    font-size: 12px; 
    float: left; 
    color: #1b1a1a; 
    height: 300px; 
    width: 649px; 
    padding-right: 10px; 
    clear: both; 
} 

#productfeature2 { 
    font-family: "Arial Narrow"; 
    font-size: 12px; 
    float: right; 
    color: #1b1a1a; 
    height: 300px; 
    width: 649px; 
    padding-right: 10px; 
    clear: both; 
} 

#shopbodycontainer { 
    font-family: "Arial Narrow"; 
    font-size: 14px; 
    float: none; 
    color: #1b1a1a; 
    min-height: 500px; 
    width: 960px; 
    margin-top: 20px; 
    margin-right: auto; 
    margin-left: auto; 
} 
#shopbody { 
    font-family: "Arial Narrow"; 
    font-size: 12px; 
    float: right; 
    color: #1b1a1a; 
    height: 400px; 
    width: 650px; 
    padding-left: 10px; 
} 
#shopheading { 
    float: right; 
    height: 25px; 
    width: 650px; 
    color: #1b1a1a; 
    padding-bottom: 10px; 
    padding-left: 10px; 
} 
#left-sidebar-container { 
    float: left; 
    min-height: 500px; 
    width: 289px; 
} 

#left-sidebar { 
    float: left; 
    width: 270px; 
    padding-right: 10px; 
    min-height: 200px; 
    margin-top: -10px; 
    padding-left: 10px; 
} 
#left-sidebar-heading { 
    font-family: "DejaVu Sans"; 
    font-size: 12px; 
    font-weight: bold; 
    text-transform: uppercase; 
    color: #ffffff; 
    float: left; 
    height: 35px; 
    width: 272px; 
    background-attachment: scroll; 
    background-image: url(../images/leftsidebarbackground.png); 
    background-repeat: no-repeat; 
    vertical-align: middle; 
    padding-top: 3px; 
    padding-left: 3px; 
}

任何帮助，将不胜感激。

来源

2012-07-19 Nika Ortega

另外，我一直在尝试z-index的负值，删除一个或另一个。就他们自己而言，他们工作很好，但他们一起吃饭。是的，我研究了其他问题。 :( – 2012-07-19 07:20:00

我在menu.js的第40行看到一个javascript错误（在chrome中）。这可能是让你的菜单掉下来的原因。

来源

2012-07-19 07:24:40 brains911

哦哇，你说得对，谢谢你指出，我会尽力解决它，虽然我不是很擅长Javascript，所以我不知道我会走多远。，谢谢！ – 2012-07-19 07:38:31

JS幻灯片重叠CSS下拉图像菜单

回答

相关问题