Entrar
Cadastre-se
Ajuda
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">
<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>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" 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>
Quote
).
!!
, gostaria de receber os códigos em um arquivo .zip para uso, pois sei que será um para a página principal e o outro para os códigos css.
consegui definir por cores cada seção, se alguém quiser depois posto aqui a solulção..
