2 replies to this topic

[shinebrightx]

Boa noite, eu estou tentando fazer um menu drop down, mas não está dando certo, acho que é porque eu aprendi um pouco de css essa semana, de qualquer maneira, vou passar os codigos, para, se possivel, alguem me ajudar...

O html:

  <ul id="nav">
		<li><p><a href="main.html" title="Principal" target="corpo"><strong>Principal.</strong></a></p></li>
		<li><p><a href="#" title="História"><strong>História.</strong></a></p></li>
			<ul>
    			<li><p><a href="#" title="Rotaract"><strong>Rotaract.</strong></a></p></li>
        		<li><p><a href="#" title="Fundadores"><strong>Fundadores.</strong></a></p></li>
			</ul>
		<li><p><a href="#" title="Presidentes"><strong>Presidentes.</strong></a></p></li>
        <li><p><a href="#" title="Conselho Diretor"><strong> Conselho<br>Diretor.</strong></a></p></li>
			<ul>
				<li><p><a href="#" title="Gestão 2010/2011"><strong>Gestão<br>2010/2011.</strong></a></p></li>
				<li><p><a href="#" title="Gestão 2009/2010"><strong>Gestão<br>2009/2010.</strong></a></p></li>
				<li><p><a href="#" title="Gestão 2008/2009"><strong>Gestão<br>2008/2009.</strong></a></p></li>
                <li><p><a href="#" title="Outras Gestões."><strong>Outras<br>Gestões.</strong></a></p></li>
			</ul>
		<li><p><a href="#" title="Projetos"><strong>Projetos.</strong></a></p></li>
        	<ul>
            	<li><p><a href="#" title="Internacionais"><strong>Internacionais.</strong></a></p></li>
                <li><p><a href="#" title="Profissionais"><strong>Profissionais.</strong></a></p></li>
				<li><p><a href="#" title="Comunidades"><strong>Comunidades.</strong></a></p></li>
				<li><p><a href="#" title="Internos"><strong>Internos.</strong></a></p></li>
                <li><p><a href="#" title="Relações Públicas"><strong>Relações Públicas.</strong></a></p></li>
			</ul>
		<li><p><a href="#" title="Mais Informações"><strong>Mais<br>informações.</strong></a></p></li>
			<ul>
				<li><p><a href="#" title="Rotary"><strong>Rotary.</strong></a></p></li>
				<li><p><a href="#" title="Distrito"><strong>Distrito.</strong></a></p></li>
			</ul>
   </ul>

O css:

ul {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 120px;	
	}

ul li {
	position: relative;
	}
	
li ul {
	position: absolute;
	left: 99px; 
	top: 0;
	display: none;
	}


ul li a {
	display: block;
	font: 65% Verdana, Arial, Helvetica, sans-serif;
	text-align: right;		
	text-decoration: none;
	color: #000;
	background: #EBEBEB url('IMAGENS/botao_link.gif')no-repeat center center;  /* IE6 Bug */
	padding: 6px;
	}

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */

ul li a:hover { color: #B30000; background: url('IMAGENS/botao_hover.gif')no-repeat center center; }

li ul li a { padding: 2px 6px; url('IMAGENS/botao_link.gif') 
		
li:hover ul, li.over ul { display: block; url('IMAGENS/botao_hover.gif') }

Se precisar eu colo o pedacinho em java também, espero que alguém me ajude .___.

Edição feita por: Édipo Costa Rebouças, 15/07/2010, 13:37.
Use o padrão bbCode para postagem de códigos

[Édipo Costa Rebouças]

esta faltando um hack pra funcionar no ie6, o que adicionar a class .over, mas era para estar funcionando nos outros browsers.

se você tiver um outro ul li na pagina vai bugar, o ideal é que vc faça com alguma classe CSS, exemplo.

ul.dropDown{ position: relative; }
    ul.dropDown li{ position: relative; }
    /*resto do código*/

com isso, vc não compromete o resto dos ul, li da página.

[shinebrightx]

Eu já consegui arrumar o que estava errado, obrigada