SubMenu Css Help

[ViniciusRod]

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;

}

[Nosreve]

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;
}

[ViniciusRod]

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!

[Nosreve]

da uma lida nesse tutorial pode ser que consiga, e tem o codigo pronto para download

http://www.linhadecodigo.com.br/artigo/347...ml5-e-css3.aspx

[Paulo_Borba]

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

Poderiam me dar uma luz.

Editado Fevereiro 8, 2013 por Paulo_Borba

[Paulo_Borba]

"RESOLVIDO"

O codigo que faltava era este <meta name="viewport" content="width:device-width">