Ajuda URGENTE com HTML/CSS Vale 10 pontos?

Preciso criar um submenu em Produtos, mas não to conseguindo me confundi muito e não tive explicação de meu professor :( .

Aqui ta meu código:

no HTML:

<ul id="menu">

<li id="contato"><a href="contato.php">Contato</a></li>

<li id="blog"><a href="fotos.php">Fotos</a></li>

<li id="clientes"><a href="clientes.php">Clientes</a></li>

<ul class="nav">

<li id="produtos"><a href="produtos.php">Produtos</a>

<ul class="submenu">

<li><a href="#">Submenu 1</a></li>

<li><a href="#">Submenu 2</a>

</li></li>

</ul>

no CSS:

#menu{

width:560px;

height:31px;

float:right;

margin:29px 0px 0px 0px;

}

#menu li{

margin:0px 0px 0px 3px;

color:#FFF;

font-size:15px;

display:inline-block;

text-transform:uppercase;

padding:5px 0px 0px 15px;

float:right;

}

/**SubMenu**/

.nav{

list-style: none;

}

.submenu{

margin:0;

list-style:none;

display:none;

width:146px;

position:absolute;

top:30px;

}

.submenu li a:link,

.submenu li a:visited{

display: block;

padding: 5px;

border-left: 10px #FFD200 solid;

background: #cccccc;

text-decoration: none;

width: 160px;

color: #000000;

}

.submenu li:hover a,

.submenu li a:active,

.submenu li a:hover{

display: block;

padding: 5px;

border-left: 10px #999999 solid;

background: #ffd200;

text-decoration: none;

width: 160px;

color: #000000;

font-weight: bold;

}

Comments

  • Para o submenu aparecer, falta pouco;

    retire o <ul class="nav">

    e você não fechou o <ul class="submenu"> no final antes do ultimo </ul>

    fazendo isso.

    adicione a seguinte linha no css

    #menu li:hover ul{

    display:block;

    }

    Este código diz o que vai acontecer com o "ul" que está dentro do "li"

    quando o mouse for posicionado sobre ele.

    Obs: Este código não funciona no Internet Explorer

    para funcionar, deve utilizar javascript

  • Esse Canal Do Youtube Pode Ajudar Você Bastante : https://www.youtube.com/ElitePvPsTube

Sign In or Register to comment.