Menus Verticais Em CSS Para Blogger

Confira esses menus estilosos feitos em CSS para colocar em seu blog.

Apresentamos para você que fica ligado no ProDeveloper alguns menus para que possa colocar em seu blog e direcionar seus usuários para as postagens desejadas. Os menus são de fácil instalação e configuração precisando apenas de alguns passos para estar funcionando perfeitamente em seu blog.

Colocando o menu no blog

1- Acesse o seu blog, clique no menu lateral e escolha "Layout".

2- Clique em "Adicionar um Gadget" e escolha o do tipo "HTML/Javascript".

3- Copie o código de um dos menus que mais lhe agradou e cole no "Conteúdo". A parte do "Título" coloque o que desejar.

4- Edite as partes possíveis do código com os links e os nomes que aparecerão no menu. (Se você entende de CSS poderá editar alguns outros trechos do código)

5- Para aumentar ou diminuir itens do menu, adicione ou exclua o trecho código como esse abaixo:

<li><a href='LINK AQUI'><span>NOME AQUI</span></a></li>

6- Clique em "Salvar" e depois "Salvar Configuração".

7- Veja como ficou acessando o seu blog.

ABAIXO OS TIPOS DE MENU COM SEUS CÓDIGOS

CÓDIGO

<style type="text/css">
/* CSS for Vertical Menu */
#cssmenu {
padding: 0;
margin: 0;
border: 0; }
#cssmenu ul, #cssmenu li {
list-style: none;
margin: 0;
padding: 0; }
#cssmenu ul {
position: relative;
z-index: 597; }
#cssmenu ul li {
min-height: 1px;
line-height: 1em; }
#cssmenu a {
display: block;
text-decoration: none; }
/* Custom CSS Styles */
#cssmenu {
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
width: 160px; }
#cssmenu ul {
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmNWY1ZjUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background-color: #F1F1F1;
background-image: -webkit-linear-gradient(top, white, whitesmoke);
background-image: -moz-linear-gradient(top, white, whitesmoke);
background-image: -o-linear-gradient(top, white, whitesmoke);
background-image: linear-gradient(white, whitesmoke);
border: 1px solid #CCC;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box; }
#cssmenu li {
border-bottom: 1px solid #CCC;
-moz-box-shadow: 0 1px 0 white;
-webkit-box-shadow: 0 1px 0 white;
box-shadow: 0 1px 0 white;
padding: 1px; }
#cssmenu li:last-child, #cssmenu li.last {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
border-bottom: 0 none; }
#cssmenu li.active {
-moz-box-shadow: 1px 2px 0 -1px rgba(0, 0, 0, 0.25);
-webkit-box-shadow: 1px 2px 0 -1px rgba(0, 0, 0, 0.25);
box-shadow: 1px 2px 0 -1px rgba(0, 0, 0, 0.25);
background: url(http://i40.tinypic.com/4ta4ih.png);
background-image: -webkit-linear-gradient(top, #555555, #3b3b3b);
background-image: -moz-linear-gradient(top, #555555, #3b3b3b);
background-image: -o-linear-gradient(top, #555555, #3b3b3b);
background-image: linear-gradient(#555555, #3b3b3b);
position: relative;
left: -8px;
width: 170px; }
#cssmenu li.active a {
border: 1px dashed #6e6e6e;
border: 1px dashed rgba(255, 255, 255, 0.25);
border-right: 0 none;
position: relative;
color: #FFF;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3); }
#cssmenu li.active:before, #cssmenu li.active:after {
content: ''; }
#cssmenu li.active:before {
z-index: 1;
width: 0px;
height: 0px;
position: absolute;
left: 0;
bottom: -5px;
border-style: solid;
border-width: 0 8px 5px 0;
border-color: transparent #222222 transparent transparent; }
#cssmenu li.active:after {
background: url(http://i41.tinypic.com/fky2ro.png) no-repeat;
display: block;
height: 48px;
width: 24px;
position: absolute;
right: -24px;
top: 0px;
z-index: 1; }
#cssmenu a {
border: 1px solid transparent;
color: #444;
height: 42px;
line-height: 40px;
padding: 0 12px;
text-align: right;
text-overflow: ellipsis; }
</style>
<div id='cssmenu'>
<ul>
<li class='active'><a href='LINK AQUI'><span>Home</span></a></li>
<li><a href='LINK AQUI'><span>Produtos</span></a></li>
<li><a href='LINK AQUI'><span>Sobre</span></a></li>
<li class='last'><a href='LINK AQUI'><span>Contato</span></a></li>
</ul>
</div>

CÓDIGO

<style type="text/css">
#cssmenu {
margin: 0;
padding: 0;
font-family: Verdana, Helvetica, Arial, sans-serif;
}
#cssmenu{
width: 210px;
}
#cssmenu ul{
list-style: none;
text-indent: 0px;
}
#cssmenu li{
margin-top: 3px;
}
#cssmenu a{
font: 12px Verdana;
padding: 4px;
color: #646464;
display:block;
padding: 6px 30px;
height: 20px;
text-decoration: none;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimJ2Bq4Lmw2VE_sxupO7n6nDLn4QgoFVdWTXQpz8AT8UZkVe6kqgbylb9lrgT-WsYol_DGfgT26SCgC0M0PH5TI3yX8ccgOpSrq3e8eAMKAz4rmxH_9ftxqK9VDRYo0wF6-Hvuk8nnY5Y/s1600/background.gif) no-repeat;
}
#cssmenu a:hover{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKm_FjWFiW-zWrCu2Qf6IO3SVQmht8wlZiZg_iTnvM7xyYE036ZIKwWJArSPxv0p8fKfvrBuwEOkXBZeTJ63x9rhIksWLpRlene3OCETsKhtYmgalWuumZAiiJcTVbGOu7VGwCnYoQZkA/s1600/highlight.gif) no-repeat right;
padding: 6px 40px;
}:148px;background:url(images/nav_active.jpg) no-repeat;color:#b18211;}
</style>
<div id='cssmenu'>
<ul>
<li class='active '><a href='LINK AQUI'><span>Home</span></a></li>
<li><a href='LINK AQUI'><span>Produtos</span></a></li>
<li><a href='LINK AQUI'><span>Sobre</span></a></li>
<li><a href='LINK AQUI'><span>Contato</span></a></li>
</ul>
</div>

CÓDIGO

<style type="text/css">
#cssmenu {
width: 200px;
border-style: solid solid none solid;
border-color: #94AA74;
border-width: 1px;
}
#cssmenu ul{
list-style:none;
margin:0px;
padding:0px;
}
#cssmenu li a {
height: 32px;
height: 24px;
text-decoration: none;
font-weight:normal;
} #cssmenu li a:link, #cssmenu li a:visited {
color: #FFFFFF;
display: block;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgye9y5aTklOujbvVQfphc00NBmSBPrj8Qnub90BeZK3Jbws-OZq1irGvjvfjmhLSz3-tRU0SkOE_j9HGNe8n4ikQSv2s3QfqyPz653-qqKRxz5If7nHhVuu8Mz4G4CnUZWR2hO17bzXz0/s1600/v6.gif);
background-repeat:no-repeat;
padding: 8px 0 0 50px;
}
#cssmenu li a:hover {
color: #666666;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgye9y5aTklOujbvVQfphc00NBmSBPrj8Qnub90BeZK3Jbws-OZq1irGvjvfjmhLSz3-tRU0SkOE_j9HGNe8n4ikQSv2s3QfqyPz653-qqKRxz5If7nHhVuu8Mz4G4CnUZWR2hO17bzXz0/s1600/v6.gif) 0 -32px;
background-repeat:no-repeat;
padding: 8px 0 0 50px;
}
#cssmenu li a:active {
color: #666666;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgye9y5aTklOujbvVQfphc00NBmSBPrj8Qnub90BeZK3Jbws-OZq1irGvjvfjmhLSz3-tRU0SkOE_j9HGNe8n4ikQSv2s3QfqyPz653-qqKRxz5If7nHhVuu8Mz4G4CnUZWR2hO17bzXz0/s1600/v6.gif) 0 -64px;
background-repeat:no-repeat;
padding: 8px 0 0 50px;
}
</style>
<div id='cssmenu'>
<ul>
<li class='active '><a href='LINK AQUI'><span>Home</span></a></li>
<li><a href='LINK AQUI'><span>Produtos</span></a></li>
<li><a href='LINK AQUI'><span>Sobre</span></a></li>
<li><a href='LINK AQUI'><span>Contato</span></a></li>
</ul>
</div>

CÓDIGO

<style type="text/css">
#cssmenu {
padding: 0;
margin: 0;
border: 0;
}
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul ul {
list-style: none;
margin: 0;
padding: 0;
}
#cssmenu ul {
position: relative;
z-index: 597;
float: left;
}
#cssmenu ul li {
float: left;
min-height: 1px;
line-height: 1em;
vertical-align: middle;
}
#cssmenu ul li.hover,
#cssmenu ul li:hover {
position: relative;
z-index: 599;
cursor: default;
}
#cssmenu ul ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
z-index: 598;
width: 100%;
}
#cssmenu ul ul li {
float: none;
}
#cssmenu ul ul ul {
top: 1px;
left: 99%;
}
#cssmenu ul li:hover > ul {
visibility: visible;
}
#cssmenu ul ul {
top: 1px;
left: 99%;
}
#cssmenu ul li {
float: none;
}
#cssmenu ul {
font-weight: bold;
}
#cssmenu ul ul {
margin-top: 1px;
}
#cssmenu ul ul li {
font-weight: normal;
}
/* Custom CSS Styles */
#cssmenu {
border-radius: 5px 0 0 5px;
-moz-border-radius: 5px 0 0 5px;
-webkit-border-radius: 5px 0 0 5px;
background-color: #141414;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAyCAYAAACd+7GKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjUwRTNGNUIzNDhBMjExRTI5MjY0Q0ZBRDcxOTYxNUNFIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjUwRTNGNUI0NDhBMjExRTI5MjY0Q0ZBRDcxOTYxNUNFIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NTBFM0Y1QjE0OEEyMTFFMjkyNjRDRkFENzE5NjE1Q0UiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NTBFM0Y1QjI0OEEyMTFFMjkyNjRDRkFENzE5NjE1Q0UiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6JCXrGAAAANElEQVR42mIwMrL6z8TAwPAXlfiDyvqNykIjfqGyiCB+4uL+JMUUNMvRCDSHo3nrL0CAAQBzOzIE69Ar8wAAAABJRU5ErkJggg==);
background-repeat: repeat-x;
width: 200px;
}
#cssmenu:after {
content: '';
display: block;
clear: both;
}
#cssmenu a {
background-color: #141414;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAyCAYAAACd+7GKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjUwRTNGNUIzNDhBMjExRTI5MjY0Q0ZBRDcxOTYxNUNFIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjUwRTNGNUI0NDhBMjExRTI5MjY0Q0ZBRDcxOTYxNUNFIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NTBFM0Y1QjE0OEEyMTFFMjkyNjRDRkFENzE5NjE1Q0UiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NTBFM0Y1QjI0OEEyMTFFMjkyNjRDRkFENzE5NjE1Q0UiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6JCXrGAAAANElEQVR42mIwMrL6z8TAwPAXlfiDyvqNykIjfqGyiCB+4uL+JMUUNMvRCDSHo3nrL0CAAQBzOzIE69Ar8wAAAABJRU5ErkJggg==);
background-repeat: repeat-x;
color: white;
display: block;
font-family: Helvetica, Arial, Verdana, sans-serif;
font-size: 12px;
font-weight: normal;
line-height: 180%;
padding: 13px 20px;
text-decoration: none;
}
#cssmenu ul {
border-right: 2px solid #0fa1e0;
list-style: none;
width: 200px;
}
#cssmenu > ul {
float: left;
}
#cssmenu > ul > li:hover:after {
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
right: 0;
top: 50%;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 10px solid #0fa1e0;
margin-top: -10px;
}
#cssmenu > ul > li:first-child >a {
border-radius: 5px 0 0 0;
-moz-border-radius: 5px 0 0 0;
-webkit-border-radius: 5px 0 0 0;
}
#cssmenu > ul > li:last-child > a {
border-radius: 0 0 0 5px;
-moz-border-radius: 0 0 0 5px;
-webkit-border-radius: 0 0 0 5px;
}
#cssmenu > ul > li.active a {
box-shadow: inset 0 0 3px black;
-moz-box-shadow: inset 0 0 3px black;
-webkit-box-shadow: inset 0 0 3px black;
background-color: #070707;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAyCAYAAACd+7GKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjUwRTNGNUIzNDhBMjExRTI5MjY0Q0ZBRDcxOTYxNUNFIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjUwRTNGNUI0NDhBMjExRTI5MjY0Q0ZBRDcxOTYxNUNFIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NTBFM0Y1QjE0OEEyMTFFMjkyNjRDRkFENzE5NjE1Q0UiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NTBFM0Y1QjI0OEEyMTFFMjkyNjRDRkFENzE5NjE1Q0UiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6JCXrGAAAANElEQVR42mIwMrL6z8TAwPAXlfiDyvqNykIjfqGyiCB+4uL+JMUUNMvRCDSHo3nrL0CAAQBzOzIE69Ar8wAAAABJRU5ErkJggg==);
background-repeat: repeat-x;
}
#cssmenu > ul > li:hover > a {
background-color: #070707;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAyCAYAAACd+7GKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjUwRTNGNUIzNDhBMjExRTI5MjY0Q0ZBRDcxOTYxNUNFIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjUwRTNGNUI0NDhBMjExRTI5MjY0Q0ZBRDcxOTYxNUNFIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NTBFM0Y1QjE0OEEyMTFFMjkyNjRDRkFENzE5NjE1Q0UiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NTBFM0Y1QjI0OEEyMTFFMjkyNjRDRkFENzE5NjE1Q0UiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6JCXrGAAAANElEQVR42mIwMrL6z8TAwPAXlfiDyvqNykIjfqGyiCB+4uL+JMUUNMvRCDSHo3nrL0CAAQBzOzIE69Ar8wAAAABJRU5ErkJggg==);
background-repeat: repeat-x;
box-shadow: inset 0 0 3px black;
-moz-box-shadow: inset 0 0 3px black;
-webkit-box-shadow: inset 0 0 3px black;
}
#cssmenu .has-sub {
z-index: 1;
}
#cssmenu .has-sub:hover > ul {
display: block;
}
#cssmenu .has-sub ul {
display: none;
position: absolute;
width: 150px;
top: 5px;
left: 100%;
}
#cssmenu .has-sub ul li {
*margin-bottom: -1px;
}
#cssmenu .has-sub ul li a {
background: #0fa1e0;
border-bottom: 1px dotted #6fc7ec;
filter: none;
font-size: 11px;
display: block;
line-height: 120%;
padding: 10px;
}
#cssmenu .has-sub ul li:hover a {
background: #0c7fb0;
}
#cssmenu .has-sub .has-sub:hover > ul {
display: block;
}
#cssmenu .has-sub .has-sub ul {
display: none;
position: absolute;
left: 100%;
top: 0;
}
#cssmenu .has-sub .has-sub ul li a {
background: #0c7fb0;
border-bottom: 1px dotted #6db2d0;
}
#cssmenu .has-sub .has-sub ul li a:hover {
background: #095c80;
}

</style>
<div id='cssmenu'>
<ul>
<li><a href='LINK AQUI'><span>Home</span></a></li>
<li class='active has-sub'><a href='LINK AQUI'><span>Produtos</span></a>
<ul>
<li class='has-sub'><a href='LINK AQUI'><span>Produto 1</span></a>
<ul>
<li><a href='LINK AQUI'><span>Sub Produto</span></a></li>
<li class='last'><a href='LINK AQUI'><span>Sub Produto</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='LINK AQUI'><span>Produto 2</span></a>
<ul>
<li><a href='LINK AQUI'><span>Sub Produto</span></a></li>
<li class='last'><a href='LINK AQUI'><span>Sub Produto</span></a></li>
</ul>
</li>
</ul>
</li>
<li><a href='LINK AQUI'><span>Sobre</span></a></li>
<li class='last'><a href='LINK AQUI'><span>Contato</span></a></li>
</ul>
</div>

Deixe seu comentário, pois ele é a motivação para nosso trabalho.

Menus Verticais Em CSS Para Blogger

segunda-feira, 1 de fevereiro de 20160 comentários

Postar um comentário

Mais Acessadas

Parceiros