Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá pessoal, estou criando um site, e nele tem um menu dropdown Horizontal:
CSS
#menu{ width:100%; margin-top:2px; height:50px; float:left; margin-left:5.5%; background-image:url(../img/Menu.jpg); text-align:center; display:block; line-height:1.5em;}
#nav ul li:hover ul ul{
display:none;
position:absolute;
left:135px;
top:0;
padding:0 0;
} display:block;
} float:none;
width:125px;
} font:16px "Trebuchet MS", Arial, Tahoma;
z-index:9999;
margin:0;
padding:0;
} float:left;
margin-left:1%;
position:relative;
list-style:none;
display:block;
} transition:0.3s;
-webkit-transition:0.3s;
-moz-transition:0.3s;
-o-transition:0.3s;
color:#000;
text-decoration:none;
margin-bottom: 4px;
margin-top: 3px;
line-height:40px;
height:44px;
padding-left:50px;
padding-right:50px;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:16px;
border-right:solid 1px #000;
display:block;
} display:none;
margin-top:0;
padding:0;
} background:#ba8f4d;
color:#FFF;
} display:block;
} float:none;
font-size:12px;
margin-top:0;
padding:0;
} background:#ba8f4d;
color:#FFF;
} background:#d6a965;
color:#FFF;
margin-top:0;
padding:0;
} background:#ba8f4d;
margin-top:0;
padding:0;
}E o HTML:
<div id="menu">
<div id="nav">
<ul>
<li><a href="../Maria Mole">Início</a></li>
<li><a href="?sobre">Sobre</a></li>
<li><a href="?galeria">Galeria</a></li>
<li><a href="?lista">Lista de Sabores</a>
<ul>
<li><a href="?bolos">Bolos</a></li>
<li><a href="?ovos">Ovos</a></li>
<li><a href="?doces">Doces</a></li>
</ul>
</li>
<li><a href="?loja">Loja</a></li>
<li><a href="?contato">Realizar Pedido</a></li>
</ul>
</div>
</div>E quando eu passo o mouse pelo "Lista de Sabores" ele abre o sub menu, porém, este sub menu fica abaixo do "Slider Rotator" que são aquelas imagens que ficam passando. E então não há como selecionar esse sub menu, gostaria saber como eu faço com que o mesmo fique sobreposto à imagem Aqui tem o css e o html do slider:
<div id="featured">
<?php
$selecionaImagens = mysql_query("SELECT * FROM slider WHERE status = 'Ativo' ORDER BY id DESC");
$contar = mysql_num_rows($selecionaImagens);
if($contar <= 0){
echo 'Ainda não existem imagens ';
}else{
while($imgs = mysql_fetch_array($selecionaImagens)){
$nome = $imgs['nome'];
$imagem = $imgs['img'];
?>
<img src="slider/<?php echo $imagem; ?>" width="1000" height="400" alt="<?php echo $nome; ?>" />
<?php }} ?>
</div>CSS
/* CSS for jQuery Orbit Plugin 1.2.3
* www.ZURB.com/playground
* Copyright 2010, ZURB
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
/* PUT IN YOUR SLIDER ID AND SIZE TO MAKE LOAD BEAUTIFULLY
================================================== */
#featured {
width: 1000px;
height: 1000px;
float:left;
margin-left:15px;
margin-top:5px;
background: #000 url('../orbit/loading.gif') no-repeat center center;
overflow: hidden; }/* CONTAINER
================================================== */
div.orbit-wrapper {
width: 1px;
height: 1px;
position: relative; }div.orbit {
width: 1px;
height: 1px;
position: relative;
overflow: hidden }div.orbit>img {
position: absolute;
top: 0;
left: 0;
display: none; }div.orbit>a {
border: none;
position: absolute;
top: 0;
left: 0;
line-height: 0;
display: none; }.orbit>div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%; }/ Note: If your slider only uses content or anchors, you're going to want to put the width and height declarations on the ".orbit>div" and "div.orbit>a" tags in addition to just the .orbit-wrapper /
/* TIMER
================================================== */
div.timer {
width: 40px;
height: 40px;
overflow: hidden;
position: absolute;
top: 10px;
right: 10px;
opacity: .6;
cursor: pointer;
z-index: 1001; }span.rotator {
display: block;
width: 40px;
height: 40px;
position: absolute;
top: 0;
left: -20px;
background: url(../orbit/rotator-black.png) no-repeat;
z-index: 3; }span.mask {
display: block;
width: 20px;
height: 40px;
position: absolute;
top: 0;
right: 0;
z-index: 2;
overflow: hidden; }span.rotator.move {
left: 0 }
span.mask.move {
width: 40px;
left: 0;
background: url(../orbit/timer-black.png) repeat 0 0; }span.pause {
display: block;
width: 40px;
height: 40px;
position: absolute;
top: 0;
left: 0;
background: url(../orbit/pause-black.png) no-repeat;
z-index: 4;
opacity: 0; }span.pause.active {
background: url(../orbit/pause-black.png) no-repeat 0 -40px }
div.timer:hover span.pause,
span.pause.active {
opacity: 1 }
/* CAPTIONS
================================================== */
.orbit-caption {
display: none;
font-family: "HelveticaNeue", "Helvetica-Neue", Helvetica, Arial, sans-serif; }.orbit-wrapper .orbit-caption {
background: #000;
background: rgba(0,0,0,.6);
z-index: 1000;
color: #fff;
text-align: center;
padding: 7px 0;
font-size: 13px;
position: absolute;
right: 0;
bottom: 0;
width: 100%; }/* DIRECTIONAL NAV
================================================== */
div.slider-nav {
display: block; }
div.slider-nav span {
width: 50px;
height: 64px;
text-indent: -9999px;
position: absolute;
z-index: 1000;
top: 50%;
margin-top: -38px;
cursor: pointer; }div.slider-nav span.right {
background:url(../orbit/dir-arrow.png);
right: -15px; }div.slider-nav span.left {
background: url(../orbit/esq-arrow.png);
left: 15px; }/* BULLET NAV
================================================== */
.orbit-bullets {
position: absolute;
z-index: 1000;
list-style: none;
bottom: -40px;
left: 50%;
margin-left: -50px;
padding: 0; }.orbit-bullets li {
float: left;
margin-left: 5px;
cursor: pointer;
color: #999;
text-indent: -9999px;
background: url(../orbit/bullets.jpg) no-repeat 4px 0;
width: 13px;
height: 12px;
overflow: hidden; }.orbit-bullets li.active {
color: #222;
background-position: -8px 0; }.orbit-bullets li.has-thumb {
background: none;
width: 100px;
height: 75px; }.orbit-bullets li.active.has-thumb {
background-position: 0 0;
border-top: 2px solid #000; }Obrigado!
Carregando comentários...