<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Menu</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: 738px; /* Width of Menu Items */
background: #fff; /* IE6 Bug */
font-size: 100%;
}
ul#primary-nav li a {
display: block;
text-decoration: none;
color: #006EA2;
padding: 5px;
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 li {
position: relative;
list-style: none;
}
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:hover, ul#primary-nav li.over { background-color: #DDE4EC; }
ul#primary-nav li a:hover { color: #006EA2; background-color:#DDE4EC; }
</style>
</head>
<body>
<div id="menu" style="position: relative; width: 738px; height: 43px">
<ul id="primary-nav">
<li class="selecionado"><a href="#" title="Descrição deste menu" accesskey="1">Menu 1</a></li>
<li class="menuparent"><a href="#" title="Descrição deste menu" accesskey="2">Menu 2</a></li>
<ul>
<li><a href="#" title="Descrição deste menu">Sub-Menu</a></li>
<li><a href="#" title="Descrição deste menu">Sub-Menu</a></li>
</ul>
<li class="menuparent"><a href="#" title="Descrição deste menu" accesskey="3">Menu 3</a></li>
<ul>
<li><a href="#" title="Descrição deste menu">Sub-Menu</a></li>
<li><a href="#" title="Descrição deste menu">Sub-Menu</a></li>
</ul>
<li class="menuparent"><a href="#" title="Descrição deste menu" accesskey="4">Menu 4</a></li>
<ul>
<li><a href="#" title="Descrição deste menu">Sub-Menu</a></li>
<li><a href="#" title="Descrição deste menu">Sub-Menu</a></li>
</ul>
<li class="menuparent"><a href="#" title="Descrição deste menu" accesskey="6">Menu 5 </a></li>
<ul>
<li><a href="#" title="Descrição deste menu">Sub-Menu</a></li>
<li><a href="#" title="Descrição deste menu">Sub-Menu</a></li>
</ul>
<li class="menuparent"><a href="#" title="Descrição deste menu" accesskey="5">Menu 6</a></li>
<ul>
<li><a href="#" title="Descrição deste menu">Sub-Menu</a></li>
<li><a href="#" title="Descrição deste menu">Sub-Menu</a></li>
</ul>
<li class="menuparent"><a href="#" title="Descrição deste menu" accesskey="6">Menu 7</a></li>
<ul>
<li><a href="#" title="Descrição deste menu">Sub-Menu</a></li>
<li><a href="#" title="Descrição deste menu">Sub-Menu</a></li>
</ul>
</ul>
</div>
</body>
</html>
Este é o código cujo qual estou testando horas e horas tentando colocar ele em horizontal...
Se você estiver em "Menu" por exemplo ele deve ficar com um background e escrito com cor X enquanto os outros menus em background branco... quando passar o mouse nos outros menus ele aparecer um background e o escrito muda a cor... se ele tiver submenu o menu aparece logo abaixo esse menu, na horizontal mesmo...
Porem ate agora so consegui brincar com as cores e as mudanças de corse nada para mudar o menu para a horizontal...
se alguem puder da uma mão agradeço desde já ...
Exemplo
Menu (cor)Menu2(/cor) Menu3 Menu4 Menu5
submenu submenu submenu
(cor) significa q vc esta naquele menu, e abaixo na horizontal vem seu submenu...
Edição feita por: namedrisk, 19/07/2007, 15:57.
