MDCISPB

Menu dropdown com ícones sociais para Blogger

by Mairink Oemes

JavaScript

<style>
#wc-soc-nav{
  width:100%;
  height:50px;
  display:block;
  padding:0;
  margin:0 0 22px 0;
background:#1D76A4;
border-bottom:4px solid rgba(197,52,52,1);
box-shadow:1px 1px 4px  #dcdcdc;
-moz-box-shadow:1px 1px 4px  #dcdcdc;
-web-kit-box-shadow:1px 1px 4px  #dcdcdc;
-goog-ms-box-shadow:1px 1px 4px  #dcdcdc;
}

#wc-soc-menu{
  margin:0 auto;
  display:block;
  padding:0;
font-family: 'georgia', sans-serif;
}

#wc-soc-menu ul{
  float:left;
  margin:0;
  padding:0;

}

#wc-soc-menu li{
  float:left;
  list-style:none;
  line-height:50px;
  margin:0;
  padding:0
}

#wc-soc-menu li a, #wc-soc-menu li a:link{
  color:#f0f0f0;
  display:block;
  margin:0;
  padding:0 10px;
font-size:16px;
  text-decoration:none;

}

#wc-soc-menu li a:hover, #wc-soc-menu li a:active, #wc-soc-menu .current_page_item a  {
  color:#fff;
  padding:0 10px;
}

#wc-soc-menu li li a, #wc-soc-menu li li a:link, #wc-soc-menu li li a:visited{
  font-size: 16px;
background:#1D76A4;
  color: #fff;
  width: 150px;
  margin: 0;
  padding: 0px 10px;
  line-height:30px;
  position: relative;
  
}

#wc-soc-menu li li a:hover, #wc-soc-menu li li a:active {
  background:rgba(197,52,52,1);

  color: #fff;
}

#wc-soc-menu li ul{
  z-index:9999;
  position:absolute;
  left:-999em;
  height:auto;
  width:168px;
  margin:0px;
  padding:0px
   
}

#wc-soc-menu li:hover ul, #wc-soc-menu li li:hover ul, #wc-soc-menu li li li:hover ul, #wc-soc-menu li.sfhover ul, 

#topwc-soc-menu li li.sfhover ul, #topwc-soc-menu li li li.sfhover ul{
  left:auto
}

#wc-soc-menu li:hover, #wc-soc-menu li.sfhover{
  position:static

}

#wc-soc-ico img
{
margin-left:-6px;
height:35px;
margin-top:9px;
}
</style>


  <div id='wc-soc-nav'>
     <div id='wc-soc-menu'>
         <ul>
       <li><a href='#'>Home</a></li>
           <li><a href='#'>Projetos</a>
               
           </li>
                <li><a href='#'>Serviços</a></li>
         
           <li><a href='#'>Contrate-nos</a></li>
              
          ...