Menu com submenu pedido

Olá ando sem tempo sequer para as minhas coisas e trazer partilhas é uma delas,mas como vi ou melhor li um pedido de um visitante então trouxe este menu que já antes tinha postado ,mas agora eu coloquei um submenu nele então espero que seja util .

Antes de tudo faça uma cópia do seu template...

Entre em modelo do seu blog depois click em editar html:
Procure este código ;


]]></b:skin>

 Agora acima desse código coloque este meu :

/*
----------------------------------------------- */
#bt-menucaixa {
width:100%;
height:50px;
padding-left:14px;
background: rgb(76,76,76); /* Old browsers */
background: -moz-linear-gradient(45deg, rgba(76,76,76,1) 0%, rgba(0,0,0,1) 0%, rgba(249,0,83,1) 1%, rgba(252,2,144,1) 23%, rgba(102,102,102,1) 25%, rgba(252,7,105,1) 30%, rgba(44,44,44,1) 50%, rgba(255,15,111,1) 60%, rgba(43,43,43,1) 76%, rgba(28,28,28,1) 91%, rgba(255,38,124,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,rgba(76,76,76,1)), color-stop(0%,rgba(0,0,0,1)), color-stop(1%,rgba(249,0,83,1)), color-stop(23%,rgba(252,2,144,1)), color-stop(25%,rgba(102,102,102,1)), color-stop(30%,rgba(252,7,105,1)), color-stop(50%,rgba(44,44,44,1)), color-stop(60%,rgba(255,15,111,1)), color-stop(76%,rgba(43,43,43,1)), color-stop(91%,rgba(28,28,28,1)), color-stop(100%,rgba(255,38,124,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(45deg, rgba(76,76,76,1) 0%,rgba(0,0,0,1) 0%,rgba(249,0,83,1) 1%,rgba(252,2,144,1) 23%,rgba(102,102,102,1) 25%,rgba(252,7,105,1) 30%,rgba(44,44,44,1) 50%,rgba(255,15,111,1) 60%,rgba(43,43,43,1) 76%,rgba(28,28,28,1) 91%,rgba(255,38,124,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(45deg, rgba(76,76,76,1) 0%,rgba(0,0,0,1) 0%,rgba(249,0,83,1) 1%,rgba(252,2,144,1) 23%,rgba(102,102,102,1) 25%,rgba(252,7,105,1) 30%,rgba(44,44,44,1) 50%,rgba(255,15,111,1) 60%,rgba(43,43,43,1) 76%,rgba(28,28,28,1) 91%,rgba(255,38,124,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(45deg, rgba(76,76,76,1) 0%,rgba(0,0,0,1) 0%,rgba(249,0,83,1) 1%,rgba(252,2,144,1) 23%,rgba(102,102,102,1) 25%,rgba(252,7,105,1) 30%,rgba(44,44,44,1) 50%,rgba(255,15,111,1) 60%,rgba(43,43,43,1) 76%,rgba(28,28,28,1) 91%,rgba(255,38,124,1) 100%); /* IE10+ */
background: linear-gradient(45deg, rgba(76,76,76,1) 0%,rgba(0,0,0,1) 0%,rgba(249,0,83,1) 1%,rgba(252,2,144,1) 23%,rgba(102,102,102,1) 25%,rgba(252,7,105,1) 30%,rgba(44,44,44,1) 50%,rgba(255,15,111,1) 60%,rgba(43,43,43,1) 76%,rgba(28,28,28,1) 91%,rgba(255,38,124,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#ff267c',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
border-top:1px solid #aaaeaa;
border-bottom:3px solid #7dfb7b;
box-shadow: 0 2px 2px #000;
z-index:1;
}
.bt-menufree {
width: 100%;
float: left;
font:14px Oswald,Arial;
text-align:center;
text-shadow: 0 2px 2px #000 ;
}
.bt-menufree ul {
float:left;
height:0px;
list-style:none;
margin:0;
padding:0;
border-radius: 3px;
}
.bt-menufree li{
float:left;
padding:0px;
}
.bt-menufree li a{
color:#fcfcfc;
border-left:1px solid #e3e3e3;
text-decoration:none;
display:block;text-transform:uppercase;
font-weight:normal;
line-height:50px;
margin:0px;
padding:0px 25px;
text-align:center;
text-decoration:none;
 -moz-transition:.2s linear;
-webkit-transition:.2s linear;
transition:.2s linear;
-o-transition:.2s linear;
}
.bt-menufree li a:hover, .bt-menufree ul li:hover a {
color:#111;
background: rgb(157,213,58); /* Old browsers */
background: -moz-linear-gradient(-45deg,  rgba(157,213,58,1) 0%, rgba(161,213,79,1) 50%, rgba(128,194,23,1) 51%, rgba(124,188,10,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(157,213,58,1)), color-stop(50%,rgba(161,213,79,1)), color-stop(51%,rgba(128,194,23,1)), color-stop(100%,rgba(124,188,10,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg,  rgba(157,213,58,1) 0%,rgba(161,213,79,1) 50%,rgba(128,194,23,1) 51%,rgba(124,188,10,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg,  rgba(157,213,58,1) 0%,rgba(161,213,79,1) 50%,rgba(128,194,23,1) 51%,rgba(124,188,10,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg,  rgba(157,213,58,1) 0%,rgba(161,213,79,1) 50%,rgba(128,194,23,1) 51%,rgba(124,188,10,1) 100%); /* IE10+ */
background: linear-gradient(135deg,  rgba(157,213,58,1) 0%,rgba(161,213,79,1) 50%,rgba(128,194,23,1) 51%,rgba(124,188,10,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9dd53a', endColorstr='#7cbc0a',GradientType=1 );
}
.bt-menufree li ul {
background: rgb(76,76,76); /* Old browsers */
background: -moz-linear-gradient(45deg, rgba(76,76,76,1) 0%, rgba(0,0,0,1) 0%, rgba(249,0,83,1) 1%, rgba(252,2,144,1) 23%, rgba(102,102,102,1) 25%, rgba(252,7,105,1) 30%, rgba(44,44,44,1) 50%, rgba(255,15,111,1) 60%, rgba(43,43,43,1) 76%, rgba(28,28,28,1) 91%, rgba(255,38,124,1) 100%);
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,rgba(76,76,76,1)), color-stop(0%,rgba(0,0,0,1)), color-stop(1%,rgba(249,0,83,1)), color-stop(23%,rgba(252,2,144,1)), color-stop(25%,rgba(102,102,102,1)), color-stop(30%,rgba(252,7,105,1)), color-stop(50%,rgba(44,44,44,1)), color-stop(60%,rgba(255,15,111,1)), color-stop(76%,rgba(43,43,43,1)), color-stop(91%,rgba(28,28,28,1)), color-stop(100%,rgba(255,38,124,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(45deg, rgba(76,76,76,1) 0%,rgba(0,0,0,1) 0%,rgba(249,0,83,1) 1%,rgba(252,2,144,1) 23%,rgba(102,102,102,1) 25%,rgba(252,7,105,1) 30%,rgba(44,44,44,1) 50%,rgba(255,15,111,1) 60%,rgba(43,43,43,1) 76%,rgba(28,28,28,1) 91%,rgba(255,38,124,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(45deg, rgba(76,76,76,1) 0%,rgba(0,0,0,1) 0%,rgba(249,0,83,1) 1%,rgba(252,2,144,1) 23%,rgba(102,102,102,1) 25%,rgba(252,7,105,1) 30%,rgba(44,44,44,1) 50%,rgba(255,15,111,1) 60%,rgba(43,43,43,1) 76%,rgba(28,28,28,1) 91%,rgba(255,38,124,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(45deg, rgba(76,76,76,1) 0%,rgba(0,0,0,1) 0%,rgba(249,0,83,1) 1%,rgba(252,2,144,1) 23%,rgba(102,102,102,1) 25%,rgba(252,7,105,1) 30%,rgba(44,44,44,1) 50%,rgba(255,15,111,1) 60%,rgba(43,43,43,1) 76%,rgba(28,28,28,1) 91%,rgba(255,38,124,1) 100%); /* IE10+ */
background: linear-gradient(45deg, rgba(76,76,76,1) 0%,rgba(0,0,0,1) 0%,rgba(249,0,83,1) 1%,rgba(252,2,144,1) 23%,rgba(102,102,102,1) 25%,rgba(252,7,105,1) 30%,rgba(44,44,44,1) 50%,rgba(255,15,111,1) 60%,rgba(43,43,43,1) 76%,rgba(28,28,28,1) 91%,rgba(255,38,124,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#ff267c',GradientType=1 );
display:none;
height:auto;
padding:-2px;
border:1px solid #000;
margin:0px;
position:absolute;
width:200px;
z-index:100;
border-top:1px solid #000;
}
.bt-menufree li:hover ul{
display:block;
}
.bt-menufree li li {
display:block;
float:none;
margin:1px;
padding:0px;
width:200px;
border:0px solid #FCFCFC;
}
.bt-menufree li:hover li a {
background: ; /* Old browsers */
border-radius: 0px;
}
.bt-menufree li ul a {
display:block;
height:35px;
font-size:12px;
font-style:normal;
margin:0px;
padding:0px 10px 10px 15px;
text-align:left;
}
.bt-menufree li ul a:hover, .bt-menufree li ul li:hover a{
background: rgb(157,213,58); /* Old browsers */
background: -moz-linear-gradient(-45deg,  rgba(157,213,58,1) 0%, rgba(161,213,79,1) 50%, rgba(128,194,23,1) 51%, rgba(124,188,10,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(157,213,58,1)), color-stop(50%,rgba(161,213,79,1)), color-stop(51%,rgba(128,194,23,1)), color-stop(100%,rgba(124,188,10,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg,  rgba(157,213,58,1) 0%,rgba(161,213,79,1) 50%,rgba(128,194,23,1) 51%,rgba(124,188,10,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg,  rgba(157,213,58,1) 0%,rgba(161,213,79,1) 50%,rgba(128,194,23,1) 51%,rgba(124,188,10,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg,  rgba(157,213,58,1) 0%,rgba(161,213,79,1) 50%,rgba(128,194,23,1) 51%,rgba(124,188,10,1) 100%); /* IE10+ */
background: linear-gradient(135deg,  rgba(157,213,58,1) 0%,rgba(161,213,79,1) 50%,rgba(128,194,23,1) 51%,rgba(124,188,10,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9dd53a', endColorstr='#7cbc0a',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
color:#ffffff;
text-decoration:none;
}

Agora procure este código :

<div id='content-wrapper'>

E acima coloque este meu código:

<div id='bt-menucaixa'>
<div class='bt-menufree'>
<ul>
<li><a href="URL">INICIO</a></li>
<li><a href="#">TEXTE</a>
<ul>
<li><a href="URL">TEXTE</a></li>
<li><a href="URL">TEXTE</a></li>
</ul>
</li>
<li><a href="#">TEXTE</a>
<ul>
<li><a href="URL">TEXTE</a></li>
<li><a href="URL">TEXTE</a></li>
</ul>
</li>
<li><a href="#">TEXTE</a>
<ul>
<li><a href="URL">TEXTE</a></li>
<li><a href="URL">TEXTE</a></li>
</ul>
</li>
<li><a href="#">TEXTE</a>
<ul>
<li><a href="URL">TEXTE</a></li>
<li><a href="URL">TEXTE</a></li>
</ul>
</li>
<li><a href="#">TEXTE1</a>
<ul>
<li><a href="URL">TEXTE1</a></li>
<li><a href="URL">TEXTE1</a></li>
</ul>
</li>
<li><a href="#">TEXTE2</a>
<ul>
<li><a href="URL">TEXTE2</a></li>
<li><a href="URL">TEXTE2</a></li>
</ul>
</li>
</ul>
</div></div

E foi esta partilha que trouxe espero que seja útil ,alguma dúvida disponha , até +

Menu com submenu pedido

► 1

► dicas menus

► Cartita