Tenho uma pagina em que o menu drop down fica por baixo do slide
html da pagina:
<html> <body> <center> <link href="css/menu.css" rel="stylesheet" type="text/css" /> <table width="990" border="0" align="center"> <tr> <td><ul id="nav"> <li><a class="iframe" href="formulario.asp">Login</a> </li> <li><a href="#">Produtos</a> <ul> <li><a href="#">iPhone</a></li> <li><a href="#">iPad</a></li> <li><a href="mac.asp">Mac</a></li> </ul> </li> <li><a href="https://www.icloud.com/" target="_blank">iCloud</a> </li> <li><a href="#">Suporte</a> <ul> <li><a href="#">Noticias</a></li> <li><a href="https://iforgot.apple.com/password/verify/appleid" target="_blank">Meu ID Apple</a></li> </ul></li> </ul> <script src="js/script.js"></script></td> </tr> <tr> <td> </td> </tr> <tr> <td><table width="990" border="0"> <tr> <td width="550"> <div id="wrapper"> <!-- Slideshow 4 --> <div class="callbacks_container"> <ul class="rslides" id="slider4"> <li> <img src="images/1.jpg" alt=""> </li> <li> <img src="images/2.jpg" alt=""> </li> <li> <img src="images/3.jpg" alt=""> </li> <li> <img src="images/4.jpg" alt=""> </li> <li> <img src="images/5.jpg" alt=""> </li> <li> <img src="images/6.jpg" alt=""> </li> </ul> </div> </td> <td width="478"><table width="0" border="0"> <tr> <td align="center" valign="top"><img src="Imagens/compre_mac.jpg" width="440" height="142"></td> </tr> <tr> <td width="451" align="center" valign="top"><table style="display: inline-table;" border="0" cellpadding="0" cellspacing="0" width="416"> <!-- fwtable fwsrc="preco_mac.fw.png" fwpage="Página 1" fwbase="preco_mac.jpg" fwstyle="Dreamweaver" fwdocid = "871204749" fwnested="0" --> <tr> <td><img src="Images/spacer.gif" width="38" height="1" alt="" /></td> <td><img src="Images/spacer.gif" width="108" height="1" alt="" /></td> <td><img src="Images/spacer.gif" width="107" height="1" alt="" /></td> <td><img src="Images/spacer.gif" width="108" height="1" alt="" /></td> <td><img src="Images/spacer.gif" width="55" height="1" alt="" /></td> <td><img src="Images/spacer.gif" width="1" height="1" alt="" /></td> </tr> <tr> <td colspan="5"><img name="preco_mac_r1_c1" src="Images/preco_mac_r1_c1.jpg" width="416" height="237" id="preco_mac_r1_c1" alt="" /></td> <td><img src="Images/spacer.gif" width="1" height="237" alt="" /></td> </tr> <tr> <td rowspan="2"><img name="preco_mac_r2_c1" src="Images/preco_mac_r2_c1.jpg" width="38" height="55" id="preco_mac_r2_c1" alt="" /></td> <td><a class="iframe" href="formulario.asp"><img src="Images/preco_mac_r2_c2.jpg" alt="" name="preco_mac_r2_c2" width="108" height="35" border="0" id="preco_mac_r2_c2" /></a></td> <td rowspan="2"><img name="preco_mac_r2_c3" src="Images/preco_mac_r2_c3.jpg" width="107" height="55" id="preco_mac_r2_c3" alt="" /></td> <td><a class="iframe" href="formulario.asp"><img src="Images/preco_mac_r2_c4.jpg" alt="" name="preco_mac_r2_c4" width="108" height="35" border="0" id="preco_mac_r2_c4" /></a></td> <td rowspan="2"><img name="preco_mac_r2_c5" src="Images/preco_mac_r2_c5.jpg" width="55" height="55" id="preco_mac_r2_c5" alt="" /></td> <td><img src="Images/spacer.gif" width="1" height="35" alt="" /></td> </tr> <tr> <td><img name="preco_mac_r3_c2" src="Images/preco_mac_r3_c2.jpg" width="108" height="20" id="preco_mac_r3_c2" alt="" /></td> <td><img name="preco_mac_r3_c4" src="Images/preco_mac_r3_c4.jpg" width="108" height="20" id="preco_mac_r3_c4" alt="" /></td> <td><img src="Images/spacer.gif" width="1" height="20" alt="" /></td> </tr> </table></td> </tr> </table></td> </tr> </table></td> </tr> <tr> <td> </td> </tr> </table> </body> </html>
css do slide:
* { margin: 0; padding: 0; } html { background: #ffffff ; } #slider2, #slider3 { box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; margin: 0 auto; z-index:999; } /* Callback example */ .callbacks_container { margin-bottom: 50px; position: relative; float: left; width: 100%; } .callbacks { position: relative; list-style: none; overflow: hidden; width: 100%; padding: 0; margin: 0; } .callbacks li { position: absolute; width: 100%; left: 0; top: 0; } .callbacks img { display: block; position: relative; z-index: 1; height: auto; width: 100%; border: 0; } .callbacks .caption { display: block; position: absolute; z-index: 2; font-size: 20px; text-shadow: none; color: #fff; background: #000; background: rgba(0,0,0, .8); left: 0; right: 0; bottom: 0; padding: 10px 20px; margin: 0; max-width: none; } .callbacks_nav { position: absolute; -webkit-tap-highlight-color: rgba(0,0,0,0); top: 52%; left: 0; opacity: 0.1; z-index: 3; text-indent: -9999px; overflow: hidden; text-decoration: none; height: 61px; width: 38px; background: transparent url("themes/themes.gif") no-repeat left top; margin-top: -45px; } .callbacks_nav:active { opacity: 0.5; } .callbacks_nav.next { left: auto; background-position: right top; right: 0; }
css do menu:
#nav,#nav ul { list-style: none outside none; margin: 0; padding: 0; } #nav { font-family: "Lucida Sans Unicode",Verdana,Arial,sans-serif; font-size: 13px; height: 36px; list-style: none outside none; margin: 0px ; text-shadow: 0 -1px 3px #202020; width: 990px; /* border radius */ -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; /* box shadow */ -moz-box-shadow: 0px 3px 3px #cecece; -webkit-box-shadow: 0px 3px 3px #cecece; box-shadow: 0 3px 4px #8b8b8b; /* gradient */ background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #787878), color-stop(0.5, #5E5E5E), color-stop(0.51, #707070), color-stop(1, #838383)); background-image: -moz-linear-gradient(center bottom, #78787 0%, #5E5E5E 50%, #707070 51%, #838383 100%); background-color: #5f5f5f; } #nav li { border-bottom: 1px solid #575757; border-left: 1px solid #929292; border-right: 1px solid #5d5d5d; border-top: 1px solid #797979; display: block; float: left; height: 34px; position: relative; width: 244px; } #nav > li:first-child { border-left: 0 none; margin-left: 5px; } #nav ul { left: -9999px; position: absolute; top: -9999px; z-index: 2; } #nav ul li { background: none repeat scroll 0 0 #838383; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5); width: 244px; } #nav li a { color: #FFFFFF; display: block; line-height: 34px; outline: medium none; text-align: center; text-decoration: none; /* gradient */ background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #787878), color-stop(0.5, #5E5E5E), color-stop(0.51, #707070), color-stop(1, #838383)); background-image: -moz-linear-gradient(center bottom, #787878 0%, #5E5E5E 50%, #707070 51%, #838383 100%); background-color: #5f5f5f; } /* keyframes #animation */ @-webkit-keyframes animation { 0% { -webkit-transform: scale(1); } 30% { -webkit-transform: scale(1.2); } 100% { -webkit-transform: scale(1.1); } } @-moz-keyframes animation { 0% { -moz-transform: scale(1); } 30% { -moz-transform: scale(1.2); } 100% { -moz-transform: scale(1.1); } } #nav li > a:hover { /* CSS3 animation */ -webkit-animation-name: animation; -webkit-animation-duration: 0.3s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: 1; -webkit-animation-direction: normal; -webkit-animation-delay: 0; -webkit-animation-play-state: running; -webkit-animation-fill-mode: forwards; -moz-animation-name: animation; -moz-animation-duration: 0.3s; -moz-animation-timing-function: linear; -moz-animation-iteration-count: 1; -moz-animation-direction: normal; -moz-animation-delay: 0; -moz-animation-play-state: running; -moz-animation-fill-mode: forwards; } #nav li:hover ul { left: 0; top: 34px; width: 150px; }
me ajudem aee por favor.