consegui este exemplo de menu desdobravel em html, javascript e CSS
o script esta funcionando, mas não entendo de CSS, gostaria de saber como faço para colocar a primeira linha do menu na horizontal e manter os submenus na vertical (como está).
Tentei a noite inteira e não consegui, sei que para fazer isso é preciso mexer no CSS e como disse não entendo quase nada de CSS.
Pergunta
misterviralata
ola Amigos!
consegui este exemplo de menu desdobravel em html, javascript e CSS
o script esta funcionando, mas não entendo de CSS, gostaria de saber como faço para colocar a primeira linha do menu na horizontal e manter os submenus na vertical (como está).
Tentei a noite inteira e não consegui, sei que para fazer isso é preciso mexer no CSS e como disse não entendo quase nada de CSS.
Segue abaixo o script do menu
Obrigado!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
<script type="text/javascript">
function IEHoverPseudo() {
var navItems = document.getElementById("primary-nav").getElementsByTagName("li");
for (var i=0; i<navItems.length; i++) {
if(navItems.className == "menuparent") {
navItems.onmouseover=function() { this.className += " over"; }
navItems.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(arrow.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="#">Menu1</a></li>
<li class="menuparent"><a href="#">Menu2</a>
<ul>
<li><a href="#">submenu2</a></li>
<li><a href="#">submenu2</a></li>
<li><a href="#">submenu2</a></li>
</ul>
</li>
<li class="menuparent"><a href="#">Menu3</a>
<ul>
<li><a href="#">submenu3</a></li>
<li><a href="#">submenu3</a></li>
<li class="menuparent"><a href="#">SUBMENU3</a>
<ul>
<li><a href="#">subsubmenu3</a></li>
<li class="menuparent"><a href="#">SUBsubmenu3</a>
<ul>
<li><a href="#">SUBSUBSUBMENU3</a></li>
</ul>
</li>
<li><a href="#">subsubmenu3</a></li>
<li><a href="#">subsubmenu3</a></li>
</ul>
</li>
<li><a href="#">submenu3</a></li>
<li><a href="#">submenu3</a></li>
</ul>
</li>
<li class="menuparent"><a href="#">Menu4</a>
<ul>
<li><a href="#">submenu4</a></li>
<li><a href="#">submenu4</a></li>
<li><a href="#">submenu4</a></li>
<li><a href="#">submenu4</a></li>
</ul>
</li>
</ul>
</body>
</html>
Link para o comentário
Compartilhar em outros sites
1 resposta a esta questão
Posts Recomendados
Participe da discussão
Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.