Ir para conteúdo

POWERED BY:

Arquivado

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

PauloRJ

Como colocar este codigo menu dropdowna na vertical

Por , em Desenvolvimento frontend

Recommended Posts

PauloRJ    4

PauloRJ
Postado

Baseado neste codigo gostaria que os Itens do menu estejam lado a lado (nao consegui)

e que ao mouse over (ja funciona) ele exiba o filho como uma 2º linha abaixo da 1º linha.

 

omo faria isso baseado neste codigo do maujor? Menu horizont tem muito + vertical neste exemplo eu tentei, procurei e nao achei alguem pode dar uma ajuda?

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="pt-br" xml:lang="pt-br"><head><meta name="keywords" content="tutorial,acessibilidade,css,css menu,estilo,folhas estilo,layout css,layout sites,menu css,paginas web,tutorial css,web design,web standards,webdesign,tableless" /><meta name="description" content=" Tutoriais, macetes, dicas sobre uso das CSS para projetar sites." /><meta name="author" content="Nick Rigby" /><meta name="MSSmartTagsPreventParsing" content="true" /><meta http-equiv="imagetoolbar" content="no" /><meta http-equiv="Pragma" content="no-cache" /><meta name="robots" content="all" /><meta name="language" content="pt-br" /><meta name="ICBM" content="-22.975781,-43.193082" /><meta name="DC.title" content="CSS para Web Design" /><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>teste</title><script type="text/javascript">function IEHoverPseudo() {	var navItems = document.getElementById("primary-nav").getElementsByTagName("li");		for (var i=0; i<navItems.length; i++) {		if(navItems[i].className == "menuparent") {			navItems[i].onmouseover=function() { this.className += " over"; }			navItems[i].onmouseout=function() { this.className = "menuparent"; }		}	}}window.onload = IEHoverPseudo;</script><style type="text/css">body { font: normal 62.5% verdana; }ul#primary-nav,ul#primary-nav ul {	margin: 0;	padding: 0;	width: 150px; /* Width of Menu Items */	border-bottom: 1px solid #ccc;	background: #fff; /* IE6 Bug */	font-size: 100%;	}ul#primary-nav li {	position: relative;	list-style: none;	}ul#primary-nav li a {	display: block;	text-decoration: none;	color: #777;	padding: 5px;	border: 1px solid #ccc;	border-bottom: 0;	}/* Fix IE. Hide from IE Mac \*/* html ul#primary-nav li { float: left; height: 1%; }* html ul#primary-nav li a { height: 1%; }/* End */ul#primary-nav ul {	position: absolute;	display: none;	left: 149px; /* Set 1px less than menu width */	top: 0;	}ul#primary-nav li ul li a { padding: 2px 5px; } /* Sub Menu Styles */ul#primary-nav li:hover ul ul,ul#primary-nav li:hover ul ul ul,ul#primary-nav li.over ul ul,ul#primary-nav li.over ul ul ul { display: none; } /* Hide sub-menus initially */ul#primary-nav li:hover ul,ul#primary-nav li li:hover ul,ul#primary-nav li li li:hover ul,ul#primary-nav li.over ul,ul#primary-nav li li.over ul,ul#primary-nav li li li.over ul { display: block; } /* The magic */ul#primary-nav li.menuparent { background: transparent url(set.gif) right center no-repeat; }ul#primary-nav li.menuparent:hover,ul#primary-nav li.over { background-color: #f9f9f9; }ul#primary-nav li a:hover { color: #E2144A; }</style></head><body><ul id="primary-nav">  <li><a href="#">Home</a></li>  <li class="menuparent"><a href="#">About</a> 	<ul>	  <a href="#">History</a><a href="#">Team</a><a href="#">Offices</a>	</ul>  </li>  <li class="menuparent"><a href="#">Services</a> 	<ul>	  <li><a href="#">Web Design</a></li>	  <li><a href="#">Internet Marketing</a></li>	  <li class="menuparent"><a href="#">Hosting</a> 		<ul>		  <li><a href="#">Dedicated</a></li>		  <li><a href="#">Virtual</a></li>		  <li><a href="#">Shared</a></li>		  <li><a href="#">Managed</a></li>		</ul>	  </li>	  <li><a href="#">Domain Names</a></li>	  <li><a href="#">Broadband</a></li>	</ul>  </li>  <li class="menuparent"><a href="#">Contact Us</a> 	<ul>	  <li><a href="#">United Kingdom</a></li>	  <li><a href="#">France</a></li>	  <li><a href="#">USA</a></li>	  <li><a href="#">Australia</a></li>	</ul>  </li></ul></body></html>

abraço!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Guilherme Rambo    4

Guilherme Rambo
Postado

pra tornar horizontal, coloca um float:left; no elemento "a".não sei c eh bem essa sua dúvida ;)

Compartilhar este post

Link para o post
Compartilhar em outros sites

PauloRJ    4

PauloRJ
Postado

nao nao era essa minha duvida nao.eu gostaria de um menu no qual temos a primeira linha com os itens:ao passar o mouse em cima (mouse over) exibe em baixo como segunda linha um ao lado do outro sub-menu relaiconado aquele item , entende?!é isso so que nao consegui modificar/editar esse codigo q postei para esta função. :huh:

Compartilhar este post

Link para o post
Compartilhar em outros sites

PauloRJ    4

PauloRJ
Postado

show mico, valeu, mas se eu qzer colocar o sub-menu para começar do inicio da linha e nao da onde se encontra o menu pai?como faria? :huh:

Compartilhar este post

Link para o post
Compartilhar em outros sites

micox    2

micox
Postado

É só colocar um left:0 no .menu-hh li ul.

 

Ficará:

.menu-hh li ul { position: absolute; visibility: hidden; white-space: nowrap; left:0;}

//Não use o código pronto que eu coloquei. Siga o tutorial. O código pronto tá com bug pois esqueci algumas coisas.

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