! problema com menu popup...

[Essinho 0]

tava vendo uns tuto no site do maujor

e axei super legal um menu usando lista com CSS...

 

ai o pro eh q o menu eh na vertical... ai tava lutando aki pra deixar ele na horizontal

sendo q naum keria perder o popup...

tipow tava tentando um menu popup na horizontal

:P

 

ai o cod lah era assim:

 

<style type="text/css">
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; }
* html ul li a { height: 1%; }
/* End */

ul {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 150px;
	border-bottom: 1px solid #ccc;
	}
ul li {
	position: relative;
	}
li ul {
	position: absolute;
	left: 149px;
	top: 0;
	display: none;
	
	}
ul li a {
	display: block;
	text-decoration: none;
	color: #777;
	background: #fff;
	padding: 5px;
	border: 1px solid #ccc;
	border-bottom: 0;
	}
	
li:hover ul { display: block; }
	
li:hover ul, li.over ul { 
	display: block; }
	
</style>

// ai o javascript era soh pra funcionar no ie

<script type="text/jscript">
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace
	(" over", "");
   }
   }
  }
 }
}
window.onload=startList;
</script>

i a lista tava assim
<ul id="nav"> 
	<li><a href="#">Home</a></li> 
	<li><a href="#">menu 1</a> 
	  <ul> 
		<li><a href="#">submenu 1</a></li> 
		<li><a href="#">submenu 2</a></li> 
		<li><a href="#">submenu 3</a></li> 
	  </ul> 
	</li> 
	<li><a href="#">Menu 2</a> 
	  <ul> 
		<li><a href="#">submenu 1</a></li> 
		<li><a href="#">submenu 2</a></li> 
		<li><a href="#">submenu 3</a></li> 
		<li><a href="#">submenu 4</a></li> 
		<li><a href="#">submenu 5</a></li> 
	  </ul> 
	</li>

tem como dexar essas listas na horizontal?

:D

 

gratu

http://forum.imasters.com.br/public/style_emoticons/default/grin.gif

[Gasparzinho 9]

Brother, beleza?

 

Olha só acho que isso vai te ajudar

 

<!--Aqui você coloca entre as tags head-->

<style type="text/css">
#menu{width=600px; height=30px;}/*aqui você pode determinar o tamanho e a posição do menu*/
ul#nav,ul#nav li{list-style-type:none;margin:0;padding:0}
ul#nav{float:right;font-size: 80%}
ul#nav li{float:left;margin-left: 3px;text-align: center}
ul#nav a{float:left;width: 95px;padding: 5px 0;background: #369A3D;text-decoration:none;color: #FFC}
ul#nav a:hover{background: #CDFFA1;color: #006A35}
ul#nav li.activelink a,ul#nav li.activelink a:hover{background: #FFF;color: #003}
</style>
------------------------

<!-- Aqui vai colar na div ou celula que esta no corpo da página-->
<div id="menu">
<ul id="nav">
<li id="Pagina Inicial do site"><a href="pag1.html">Pagina 1</a></li>
<li id="Segunda pagina do site"><a href="pag2.html">Pagina 2</a></li>
<li id="Terceira pagina do site"><a href="pag3.html">Pagina 3</a></li>
<li id="Quarta pagina do site"><a href="pag4.html">Pagina 4</a></li>
<li id="Quinta pagina do site"><a href="pag5.html">Pagina 5</a></li>
<li id="Sexta pagina do site"><a href="pag6.html">Pagina 6</a></li>
</ul>
</div>

Caso tenha alguma dúvida ou não funfe aí posta mais que ai agente vê o que ta rolando ok?

 

Espero ter ajudado http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

[]'s

 

Gaspar

[Essinho 0]

iaew gaspar beleza !?

:D

 

acabei fazendo assim

 

adicionei o float

 

ul li {
position: relative;
float:left;
}

ai acrescentei tbem essa linha
ul li ul li{float:none;}

depois ajustei os width's, left's e top

:P

 

ai funcionau

 

mais vou tentar essa ai tbem pra ver qualeh

:D

\o/

 

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

[Gasparzinho 9]

Tchê, to com uma pulga atras da orelha...

 

 

assim nao rola:

 

display:block;/*ORGANIZA OS OBJETOS NA VERTICAL*/

agora assim rola:

 

display:inline;/*ORGANIZA OS OBJETOS EM UMA LINHA, NA HORIZONTAL*/

sacou???

 

 

[]'s