0

好吧，我有点不好意思寻求帮助，但我真的需要你的意见，因为我有截止日期......

我有一个图像下拉菜单，但我的幻灯片与它重叠。我在 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;
}

任何帮助，将不胜感激。

4

1 回答 1

0

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

于 2012-07-19T07:24:40.940 回答