Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Mari

Menu Drop Down

Por , em Desenvolvimento frontend

Recommended Posts

Mari    0

Mari
Postado

Olá a todos,

Eu estou iniciando no CSS agora, estou tentando fazer um menu horizontal, onde os submenus fiquem tambem na horizontal, encontrei um modelo para testar, e aqui funciona no IE7 mas nao funciona no FF

 

submenu.css

.nav {height: 35x;background: url(/images/pro_line_0.gif) repeat-x; position:relative; font-family:arial, verdana, sans-serif; font-size:11px; width:1000px;z-index:500;}.nav .table {display:table; margin:0 auto;}.nav .select,.nav .current {margin:0; padding:0; list-style:none; display:table-cell; white-space:nowrap;}.nav li {margin:0; padding:0; /* height:auto; */float:left;}.nav .select a {display:block; height:35px; float:left; background: url(/images/pro_line_0.gif); padding:0 30px 0 30px; text-decoration:none; line-height:35px; white-space:nowrap; color:#ddd;}.nav .current a {display:block; height:35px; float:left; background: url(/images/pro_line_2.gif); padding:0 0 0 15px; text-decoration:none; line-height:35px; white-space:nowrap; color:#fff;}.nav .current a b {display:block; padding:0 30px 0 15px; background:url(/images/pro_line_2.gif) right top;}.nav .select a:hover, .nav .select li:hover a {background: url(/images/pro_line_1.gif); padding:0 0 0 15px; cursor:pointer; color:#fff;}.nav .select a:hover b, .nav .select li:hover a b {display:block; float:left; padding:0 30px 0 15px; background:url(/images/pro_line_1.gif) right top; cursor:pointer;}.nav .select_sub {display:none;}/* IE6 only */.nav table {border-collapse:collapse; margin:-1px; font-size:1em; width:0; height:0;}.nav .sub {display:table; margin:0 auto; padding:0; list-style:none;}.nav .sub_active .current_sub a, .nav .sub_active a:hover {background:transparent; color:#f00;}.nav .select :hover .select_sub, .nav .current .show {display:block; position:absolute; width:1000px; top:35px; background:url(/images/back_0.gif); padding:0; z-index:100; left:0; text-align:center;}.nav .current .show {z-index:10;}.nav .select :hover .sub li a, .nav .current .show .sub li a {display:block; float:left; background:transparent; padding:0 10px 0 10px; margin:0; white-space:nowrap; border:0; color:#444;}.nav .current .sub li.sub_show a {color:#088; cursor:default; background:url(/images/back_1.gif);}.nav .select :hover .sub li a:hover, .nav .current .sub li a:hover {visibility:visible; color:#088; background:url(/images/back_1.gif);}
submenu_ie.css

.nav ul {display:inline-block;}.nav ul {display:inline;}.nav ul li {float:left;}.nav {text-align:center;}.nav .select a:hover b, .nav .select li:hover a b {float:none;}
pag html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252" /><title>Menu / Submenu</title><link rel="stylesheet" media="all" type="text/css" href="/css/submenu.css" /> <!--[if IE]><link rel="stylesheet" media="all" type="text/css" href="/css/submenu_ie.css" /><![endif]--></head><body><!--[if IE 7]><div class="nav"><div class="table"><ul class="current"><li><a href="#"><b>Home</b></a></li></ul><ul class="select"><li><a href="#"><b>O Projeto</b><!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><div class="select_sub">	<ul class="sub">		<li><a href="#">O que é</a></li>		<li><a href="#">Aplicações</a></li>		<li><a href="#">Núcleos</a></li>		<li><a href="#">Pesquisa</a></li>	</ul></div><!--[if lte IE 6]></td></tr></table></a><![endif]--></li></ul><ul class="current"><li><a href="#"><b>Multimídia</b><!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><div class="select_sub show">	<ul class="sub">		<li><a href="#">Títulos disponíveis</a></li>		<li><a href="#">Novidades</a></li>		<li><a href="#">Como adquirir</a></li>		<li><a href="#">Publicações</a></li>	</ul></div><!--[if lte IE 6]></td></tr></table></a><![endif]--></li></ul><ul class="select"><li><a href="#"><b>Notícias</b><!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><div class="select_sub">	<ul class="sub">		<li><a href="#">Últimas notícias</a></li>		<li><a href="#">Homem Virtual na mídia</a></li>		<li><a href="#">Sala de imprensa</a></li>		<li><a href="#">Cadastre-se</a></li>	</ul></div><!--[if lte IE 6]></td></tr></table></a><![endif]--></li></ul><ul class="select"><li><a href="#"><b>Outros projetos</b><!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><div class="select_sub">	<ul class="sub">		<li><a href="#">Telessaúde</a></li>		<li><a href="#">Jovem Doutor</a></li>	</ul></div><!--[if lte IE 6]></td></tr></table></a><![endif]--></li></ul></div><br /><br /><br /><br /></body></html>
Alguém pode me ajudar? http://forum.imasters.com.br/public/style_emoticons/default/blush.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

Vitor Moreno    0

Vitor Moreno
Postado

Bem mari....acho que o menu que você queira é o Menu Drop Down....tem um site que tem um tutorial bom falando disso...Maujor.com....mais se preferir posso te ajudar a fazer um desse tipo....é que tbm estou fazendo um desse...o problema que ele nao funciona no IE...pq o IE nao aceita uma linha de cógido CSS...é muito avançado para ele ;)

 

Bem se você quizer podemos desenvolver um.

 

Adiciona meu msn...ai nos falamos melhor

 

vitor_stevolo@hotmail.com

 

Abraços http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

inforsis    1

inforsis
Postado

Olá Mari, Vitor Moreno! Bom Dia!

Seia interressante se vocês resolvessem as dúvidas aqui no proprio tópico. Pois as suas dúvidas podem ser as mesmas de outros usuários.

 

Menu Drop Down:

http://maujor.com/tutorial/ddownmenu.php

 

Conforme forem surgindo as dúvidas, postem observando sempre a Busca do Fórum iMasters.

Até Mais. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito