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