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

SubMenu Css Help


ViniciusRod

Pergunta

Bom dia pessoal, estou com duvida quando a um submenu que estou fazendo.

simplesmente não funciona! não sei se falta algo ou sei la. :wacko:

Por favor me ajudem!

_______________________________________________________________________

HTML: (não consegui colocar em codebox)

<div class="indent">

<!-- header-box begin -->

<div class="header-box">

<div class="inner">

<ul class="nav">

<li><a href="index.html" class="current">Home page</a></li>

<li><a href="#">MENU</a>

<ul>

<li><a href="#">SUBMENU</a></li>

</ul>

</li>

<li><a href="#">A MENU</a></li>

</li>

<li><a href="#">MENU</a></li>

<li><a href="#">MENU</a></li>

</ul>

</div>

</div>

<!-- header-box end -->

</div>

</div>

</div>

_______________________________________________________________________

CSS:

ul li:hover ul {

display: block;

}

Link para o comentário
Compartilhar em outros sites

5 respostass a esta questão

Posts Recomendados

  • 0

da uma lida nesse tutorial para entender melhor

http://maujor.com/tutorial/ddownmenu.php

mas dando uma explicada (em sub-meno vertical) é mais ou meno assim...

abra a <ul> e depois as <li> que são os menus principais, caso queira um sub-menu abra uma nova lista dentro da <li> onde vai aparecer o sub-menu ao passar o mouse...

exemplo

<ul>
    <li><a href="#">home</a></li>
    <li>
        <a href="#">artigos</a>
        <ul>
            <li><a href="#">sub-menu-1</a></li>
            <li><a href="#">sub-menu-2</a></li>
            <li><a href="#">sub-menu-3</a></li>
        </ul>
    </li>
    <li><a href="#">noticias</a></li>
    <li><a href="#">empresa</a></li>
    <li>
        <a href="#">tutorias</a>
        <ul>
            <li><a href="#">sub-menu-1</a></li>
            <li><a href="#">sub-menu-2</a></li>
            <li><a href="#">sub-menu-3</a></li>
        </ul>
    </li>
    <li><a href="#">contato</a></li>
</ul>
e o css assim
*{
    padding:0px;
    margin:0px;
}
ul{
    list-style: none;
    width:100px;
}
ul li{
    position: relative;
    border:1px #000000 solid;
}
li ul{
    position: absolute;
    left: 99px;
    top: 0;
    display: none;
}
ul li a{
    display: block;
    text-decoration: none;
    padding: 5px 5px 5px 5px;
}
ul a:hover{
    background-color:#FF9900;
    color:#FFF;
}
li:hover ul{
    display: block;
    background-color:#FFF;
}
li:hover ul a{
    border-right:none;
}

Link para o comentário
Compartilhar em outros sites

  • 0

Cara fiz assim no css agora:

#header .nav { width:100%; overflow:hidden;}
#header .nav li { display:inline;}
#header .nav li a {float:left; width:156px; height:55px; line-height:52px; font-size:16px; text-transform:uppercase; font-weight:bold; color:#fff; text-decoration:none; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; text-align:center; margin-right:2px; background:url(images/nav-bg1.png) no-repeat left top;}
#header .nav li a:hover    { background:url(images/nav-bg2.png) no-repeat left top;}
#header .nav li a.current { background:url(images/nav-bg2.png) no-repeat left top;}
e adicionei isso aqui:
li:hover ul{
    display: block;
    background-color:#FFF;
}

mesmo assim não funcionou!

Link para o comentário
Compartilhar em outros sites

  • 0

Ola Pessoal.

Eu tb estou com dificuldade no menu drop.

Estou editando um template que tem "Texto" no menu, (Home Empresa Produtos Serviços Contato)

não estou sabendo troca-lo por um css menu bar.

Site que estou editando > http://paulodesigner.p.ht/htcy00/

Menu bar que quero colocar > http://www.kriesi.at/wp-content/extra_data...icks_final.html

Quem já tem as manha e quiser este menu bar, download aqui > http://www.kriesi.at/wp-content/uploads/files/kwicks.zip

Sera que essa informacao ajuda? > 505b5c236174857.jpg

Poderiam me dar uma luz.

Editado por Paulo_Borba
Link para o comentário
Compartilhar em outros sites

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...