好的，我有点尴尬要求帮助，但我真的需要你对这个问题的意见，因为我有一个截止日期......
我有一个图片下拉菜单，但我的幻灯片重叠了。我在zss中放置了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;
}
任何帮助都将不胜感激。
答案 0 :(得分：0)
我在menu.js的第40行看到了一个javascript错误（在chrome中）。这可能是让你的菜单不断下降的原因。