Ir para conteúdo
Fórum Script Brasil
  • 0

Formatar Css


misterviralata

Pergunta

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.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,3k
×
×
  • Criar Novo...