Quantcast
Channel: Últimos conteúdos
Viewing all articles
Browse latest Browse all 14190

Menu drop down fica por trás do slide

$
0
0

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.


Viewing all articles
Browse latest Browse all 14190

Trending Articles