Menu dinâmico só com CSS
Tem como fazzer isso, sem o uso de JavaScript?
Segue o HTML e a folha de estilos que tentei fazer isso e não consegui.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <style type="text/css" media="all"> @import "style.css"; </style> <title> Instituto Sollo - Gestão Pública e Privada e Consultoria Ambiental </title></head><body> <div id="container"> <div id="header1"> <h1><span>Instituto sollo</span></h1> </div> <div id="header2"> <h1><span>Gestão pública e Privada e Consultoria Ambiental</span></h1> </div> <div id="linkList"> <ul> <li><a href="institucional.html" class="institucional">Institucional</a></li> <li><a href="equipe.html">Equipe</a></li> <li><a href="artigos.html">Artigos</a></li> <li><a href="galeria.html">Galeria</a></li> <li><a href="eventos.html">Eventos</a></li> <li><a href="noticias.html">Notícias</a></li> <li><a href="municipios.html">Municípios</a></li> <li><a href="links.html">Links</a></li> <li><a href="fale.html">Fale conosco</a></li> </ul> </div> <div id="headerFlash"> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="[http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="550" height="120" /> <param name="movie" value="cabecalho.swf" /> <param name="quality" value="high" /> <embed src="cabecalho.swf" type="application/x-shockwave-flash" plugins="http://www.macromedia.com/go/geflashplayer" width="550" height="120"></embed> </object> </div> </div></body></html>
* { margin: 0; padding: 0; text-decoration: none; list-style-type: none; }body { text-align: center; }#container { width: 760px; text-align: left; margin: auto; }#header1 h1 { width: 204px; height: 21px; background: transparent url(images/header1.jpg) no-repeat; }#header1 h1 span { display: none; }#header2 h1 { width: 204px; height: 120px; background: transparent url(images/header2.jpg) no-repeat; }#header2 h1 span { display: none; }#linkList { position: absolute; top: 0; width: 555px; height: 21px; margin-left: 205px; }#linkList li { display: inline; }#linkList li a { width: 61px; height: 21px; } #headerFlash { position: absolute; top: 21px; width: 550px; margin-left: 204px; }Está assim: http://paginas.terra.com.br/informatica/testes/
Tem que ficar como no cabeçalho deste site: http://www.institutosollo.org.br/
Desde já agradeço.
Discussão (2)
Carregando comentários...