Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá!!
Peguei um exemplo de menu no site do Maurício Samy Silva (http://www.maujor.com/tutorial/ddownmenu-a.php) e adaptei para ficar na horizontal. Ficou bom, mas gostaria que somente os submenus ficassem na vertical mas não estou conseguindo... se alguém puder me ajudar desde já meu muito obrigado!!
Marcos
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">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>Horizontal Drop Down Menus - Parte 3</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: 600px; */ /* Width of Menu Items */ border-bottom: 0px; solid #ccc; background: #fff; /* IE6 Bug *//* background: blue; /* IE6 Bug */ cor do fundo dos menus font-size: 100%; }ul#primary-nav li { position: relative; list-style: none; display: inline; float:left; }ul#primary-nav li a { display: block; text-decoration: none; float:left; color: #777;/* color: red; cor das letras do menu */ padding: 5px; border: 1px solid #ccc; border-bottom: 1; }/* 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: 0px; /* Set 1px less than menu width */ top: 23px; }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; top: 17px;} /* 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(arrow-down.gif) right center no-repeat; } /* ul#primary-nav li.menuparent { background: yellow url(arrow-down.gif) right center no-repeat; } Cor dos que tem o -> */ul#primary-nav li.menuparent:hover,ul#primary-nav li.over { background-color: #f9f9f9; }/*ul#primary-nav li.over { background-color: blue } cor da selecao quando tem submenu */ul#primary-nav li a:hover { color: #E2144A; }/*ul#primary-nav li a:hover { color: blue; background-color: blue} cor da letra dos menus com selecao / cor do fundo */</style></head><body><h1>EXEMPLO DE MENU PRINCIPAL NA HORIZONTAL</h1><h2>Adaptação feita por:</h2>Marcos Antunes Moleiro<br><br><ul id="primary-nav"> <li><a href="#">Home</a></li> <li class="menuparent"><a href="#">About </a> <ul> <li><a href="#">History</a></li> <li><a href="#">Team</a></li> <li><a href="#">Offices</a></li> </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="[http://www.uem.br"](http://www.uem.br) target="_blank">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>Carregando comentários...