Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS


Moderador: web

 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17743
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Menu expansível

29-03-2009 21:20

Abaixo segue um script bem útil de menu expansível usando somente CSS

Obs.: Usar o Doctype <!DOCTYPE html>

<style> #painters2 {   padding:0;   margin:0;   list-style-type:none;   } #painters2 li {   width:75px;   height:20px;   float:left;   border:1px solid #000;   margin-right:2px;   } #painters2 a em {   font-style:normal;   font-size:1em;   line-height:1.5em;   } #painters2 a {   text-decoration:none;   color:#000;   position:absolute;   width:75px;   height:20px;   display:block;   text-align:center;   } #painters2 a.red {background:#c00; color:#fff;} #painters2 a.orange {background:#fc0; color:#000;} #painters2 a.yellow {background:#ee0; color:#000;} #painters2 a.green {background:#080; color:#fff;} #painters2 a.blue {background:#00c; color:#fff;} #painters2 a:hover {   width:120px;   height:28px;   z-index:200;   background:transparent url(../ads/opaque.gif);   } #painters2 a:hover em {   font-size:1.5em;   line-height:1.1em;   overflow:hidden;   cursor:pointer;   background:#fff;   border:1px solid #000;   position:absolute;   width:120px;   height:25px;   left:-12px;   top:-4px;   } #painters2 a:hover.red em {background:#c00;} #painters2 a:hover.orange em {background:#fc0;} #painters2 a:hover.yellow em {background:#ee0;} #painters2 a:hover.green em {background:#080;} #painters2 a:hover.blue em {background:#00c;} </style>


<ul id="painters2">   <li><a class="red" href="#nogo"><em>Monet</em></a></li>   <li><a class="orange" href="#nogo"><em>Constable</em></a></li>   <li><a class="yellow" href="#nogo"><em>Renoir</em></a></li>   <li><a class="green" href="#nogo"><em>Turner</em></a></li>   <li><a class="blue" href="#nogo"><em>Matisse</em></a></li> </ul>

Fonte: http://www.cssplay.co.uk/menus/expand.html
0
A melhor hospedagem para o seu site HostGator!

Quem está online

Usuários navegando neste fórum: Google [Bot]