Menu drop down css

vini_loock · Janeiro 15, 2010

Olá.

Eu fiz um menu drop down em apenas css, testei ele sozinho, e funcionou, mas quando eu fui colocar na minha página... acontedeu o seguinte:

quando passa o mouse sobre o link bairros, a div da esquerda vai mais para o meio para dar espaço para os sub-menus.

Eu acredito que possa ser por eu estar usando float, só que eu não sei se posso usar postion: absolute, porque o site não vai ser editado por mim e o responsável por edita-lo não conhece nada nem de html, eu poderia ter terminado esse site há muito tempo, mas dai o problema é que eu ia ter que estar fazendo futuras atuallizaçoes, mas precisamente todos os dias.

Alguém ve a solução?

Ah...

e eu tentei usar position: absolute, quase deu certo, mas quando passa o mouse sobre o link bairros, ele não joga a camada toda para baixo, mas joga o conteudo, já até pensei em usar position:absolute no conteudo da camada, mas se o cara for resolver mudar alguma coisa, ou acrecentar mais um link daria problema.

Segue abaixo o html.

<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    
<style type="text/css">

body{
font-family: arial;
font-size: 12px;
}

#geral {
/*width:800px;*/
min-width: 750px;
max-width: 1280px;
border:1px solid gray;
top: 0px;
margin:0 auto;
-moz-box-shadow: 0 0 10px #666;
}
        
#cabecalho{
background: green;
height: 130px;
color:#FFF;
margin: 5 5 0 5;
}

#menu{
height: 30px;
color:#FFF;
margin: 5 5 0 5;
padding: 0px;
}
    
#esquerda{
background: green;
width:130px;
float: left;
margin: 5 0 0 5;
}
        
#direita {
background: green;
width:130px;
float: right;
margin: 5 5 5 5;
text-align: center;
}
    
#conteudo {
background:lightgray;
margin:5 140px;
min-height:700px;
}
        
#rodape {
background: green;
color:#FFF;
text-align:center;
margin: 5 5 5 5;
}

#guia{
background: #00ccff;
padding: 0px;
list-style: none;
margin: 0 0 0 0;
}

#guia:active{
background: #fff;
}

#guia:visited{
background: #fff;
}

#subiten{
background: #33ff66;
padding: 0px;
list-style: none;
}

h1{
margin: 0 0 0 0;
color: #fff;
background: #666;
font-family: arial;
font-size: 14px;
text-align: center;
}

#ulmenu{
position: relative;
display: inline;
}

#limenu{
position: relative;
background: #33ff66;
border: 1px solid red;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
padding: 3px;
float: left;
display: inline;
}

#linktop{
color: #ffffff;
font-weight: bold;
font-size: 15px;
font-family: arial;
text-decoration:none;
}

#separador{
text-shadow: 1px 1px 1px #000;
}

#submenu{
float: top;
top: 0px;
left: 0px;
display: none;
}

#limenu:hover #submenu{
display: block;
}
</style>


<script src="jquery-1.3.2.min.js" type="text/javascript"></script>

<script language="javascript">

$(document).ready( function() {
    $('ul#guia > li > a').click(function() {
        $(this).next().slideToggle();
    });
});
</script>
</head>
<body>

<div id="geral">

<div id="cabecalho">Topo</div>

<div id="menu">
    <ul id="ulmenu">
        <li id="limenu"><a href="#" id="linktop">Home</a> <span id="separador">|</span></li>
        <li id="limenu"><a href="#" id="linktop">Bairros</a> <span id="separador">|</span>
            <ul>
                <li id="submenu"><a href="#">Vitória Régia</a></li>
                <li id="submenu"><a href="#">Tatuquara</a></li>
                <li id="submenu"><a href="#">Sítio Cercado</a></li>
                <li id="submenu"><a href="#">Pinheirinho</a></li>
            </ul>
        </li>
        <li id="limenu"><a href="#" id="linktop">Anuncie</a> <span id="separador">|</span></li>
        <li id="limenu"><a href="#" id="linktop">Classificados</a> <span id="separador">|</span></li>
        <li id="limenu"><a href="#" id="linktop">Mural de recados</a> <span id="separador">|</span></li>
        <li id="limenu"><a href="#" id="linktop">Telefones &Uacute;teis</a> <span id="separador">|</span></li>
        <li id="limenu"><a href="#" id="linktop">Objetivo</a> <span id="separador">|</span></li>
        <li id="limenu"><a href="#" id="linktop">Contato</a> <span id="separador">|</span></li>
    </ul>
</div>
    
<div id="esquerda">

    <h1>Guia do Com&eacute;rcio</h1>

    <ul id="guia">


        <li id="guia"><a href="java script:void(0);">Iten</a>
            <ul id="subiten">
                <li id="subiten"><a href="#">Sub</a></li>
                <li id="subiten"><a href="#">Sub</a></li>
                <li id="subiten"><a href="#">Sub</a></li>
            </ul>
        </li>


        <li id="guia"><a href="java script:void(0);">Iten</a>
            <ul id="subiten">
                <li id="subiten"><a href="#">Sub</a></li>
                <li id="subiten"><a href="#">Sub</a></li>
                <li id="subiten"><a href="#">Sub</a></li>
            </ul>
        </li>


        <li id="guia"><a href="java script:void(0);">Iten</a>
            <ul id="subiten">
                <li id="subiten"><a href="#">Sub</a></li>
                <li id="subiten"><a href="#">Sub</a></li>
                <li id="subiten"><a href="#">Sub</a></li>
            </ul>
        </li>


        <li id="guia"><a href="java script:void(0);">Iten</a>
            <ul id="subiten">
                <li id="subiten"><a href="#">Sub</a></li>
                <li id="subiten"><a href="#">Sub</a></li>
                <li id="subiten"><a href="#">Sub</a></li>
            </ul>
        </li>
    </ul>


    <h1>Tempo</h1>
        Clima tempo Clima tempo<br>Clima tempo Clima tempo<br>Clima tempo Clima tempo<br>Clima tempo Clima tempo<br>

    <h1>Anuncie</h1>
        Banner anuncieBanner anuncieBanner anuncieBanner anuncieBanner anuncie...
</div>

<div id="direita">
direita
</div>
    
<div id="conteudo">

</div>
    
<div id="rodape">Rodap&eacute;</div>

</div>

</body>
</html>

e se for facilitar, tenho o html do menu separado.

<html>
<head>
<style>
#iten #subiten {
    margin: 0;
    padding: 0;
    list-style: none;
    width: 150px;
    }



#iten {
    position: relative;
    }

#subiten{
    float: top;
    left: 0px;
    top: 30;
    display: none;
    }//aqui que fas os sub itens desaparecer


#iten a {
    display: block;
    text-decoration: none;
    color: #777;
    background: #fff;
    padding: 5px;
    border: 1px solid #ccc;
    border-bottom: 0;
    display: inline;
    }

#iten{
    margin: 0;
    padding: 0;
    list-style: none;
    width: 150px;
    border-bottom: 1px solid #ccc;
    }

#iten:hover #subiten { display: block; }
</style>
</head>
<body>


<ul id="iten"> 
    <li id="iten"><a href="#">Bairros</a>
      <ul id="subiten"> 
        <li id="subiten"><a href="#">History</a></li> 
        <li id="subiten"><a href="#">Team</a></li> 
        <li id="subiten"><a href="#">Offices</a></li> 
      </ul> 
    </li>   
   </ul>


</body>
</html>

Hum.. e eu comentei sobre o html 5 e css3 que brevemente poderemos usa-los sem preocupações dai ele (como sempre) se interessou em fazer o portal com elas, mas eu to vendo que hoje em dia já temmuita gente atualizada para pelo menos css3, então resolvi fazer esse com o css3, mas será que alguém tem alguns exemplos do css3 ou html5.

Bom é isso, agradeço a atenção de todos.

Vlw

Ah.

e não liguem para o layout horrivel que está esse, mas é só um rascunho para testar os (2) efeitos

Editado Janeiro 15, 2010 por vini_loock

Entrar

Menu drop down css

Pergunta

vini_loock

Link para o comentário

Compartilhar em outros sites

0 respostass a esta questão

Posts Recomendados

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades