Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá...estou tentando adicionar submenus cortina ao meu menu principal e ainda não consegui. Aqui está o trecho do meu
código...alguem pode dar uma forcinha ?
No head tenho
body{
background:#eee;color:#000;font-size:11px;font-family:Verdana,sans-serif;margin:0;padding:0;text-align:center}
#tudo{background:#fff;border:#000 1px solid;width:750px;margin:auto;padding:0;text-align:left}
#cabecalho{background:#ccc;font-size:18px;text-align:center;padding:30px}
#menu{background:#000;height:27px;margin:0;padding:0}
#menu ul{margin:0;padding:0;margin-left:6px}
#menu ul li{display:inline}
#menu ul li a{background:#444;color:#fff;border:1px #fff solid;border-bottom:1px #000 solid;float:left;padding:5px 7px;margin:2px;text-decoration:none}
#menu ul li a:hover{background:#fff;color:red;border:red 1px solid;border-bottom:none;text-decoration:none}
#conteudo{clear:both;font-size:12px;padding:5px;text-align:center}
#rodape{clear:both;background:#000;color:#fff;padding:5px;text-align:center
}
e no body
<div id="menu">
<ul>
<li><a href="Link1.htm">MOVIMENTO DE DO</a></li>
<li><a href="Link2.htm">MOVIMENTO DE DN'S</a></li>
<li><a href="Link3.htm">NOTIFICACOES</a></li>
<li><a href="Link4.htm">M&EACUTE;DICOS</a></li>
<li><a href="Link5.htm">ESTABEL</a></li>
</ul>
</div>oi...grato, mas pode me dar um exemplo de como embutir um submenu de exemplo aproveitando o código que postei ?
<ul>
<li><a href="Link1.htm">MOVIMENTO DE DO</a></li>
<ul>
<li><a href="#"Submenu exemplo um</a></li>
</ul>
<li><a href="Link2.htm">MOVIMENTO DE DN'S</a></li>
<ul>
<li><a href="#"Submenu exemplo dois</a></li>
</ul>
<li><a href="Link3.htm">NOTIFICACOES</a></li>
<ul>
<li><a href="#"Submenu exemplo tres</a></li>
</ul>
<li><a href="Link4.htm">M&EACUTE;DICOS</a></li>
<ul>
<li><a href="#"Submenu exemplo quatro</a></li>
</ul>
<li><a href="Link5.htm">ESTABEL</a></li>
<ul>
<li><a href="#"Submenu exemplo cinco</a></li>
</ul>
</ul>body {
font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
padding: 0 0 0;
font-size: 16px;
text-align: right;
}ul {
text-align: left;
display: inline;
margin: 2px;
margin-right: 11px;
padding: 1px 1px 1px 1px;
list-style: none;
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
box-shadow: 1px 1px 1px #d7d7d7;;
}ul li a {
text-transform: none;
text-decoration: none;
color: dodgerblue;
font-size: 12px;
}ul li {
font: bold 12px/18px sans-serif;
display: inline-block;
margin-right: -4px;
position: relative;
padding: 10px 17px 10px 19px;
background: #fff;
cursor: pointer;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
} background: #d7d7d7;
color: #fff;
}ul li ul {
padding: 0;
position: absolute;
top: 37px;
left: -1px;
width: 149px;
margin-right: 100px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transiton: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-transition: opacity 0.2s;
}ul li ul li {
background: #d7d7d7;
display: block;
color: #fff;
text-shadow: 0 0px 0 #1A2223;
} background: #666;
padding: 18px;
}ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
Esse é o do meu site da uma olhada e tira por ele.
HTML:
CSS:
body {
ul {
ul li a {
ul li {
ul li:hover {
ul li ul {
li#sobre {
li#services {
li#clientes {
ul li ul li {
ul li ul li:hover {
ul li:hover ul {