Ir para conteúdo
Fórum Script Brasil
  • 0

Dificuldade para criar 3º nivel em menu


alanmm

Pergunta

Olá pessoal, andei pesquisando aqui no fórum uma solução para meu problema, mas as alternativas que tentei não resolveram o caso. Poderiam me dar uma ajudinha aqui?

Quero criar um terceiro nível em meu menu, especialmente no marcador "Download", para que eu possa, por exemplo, dar categorias de downloads como "material acadêmico, etc...".

<div class='top-nav'>
<div id='menu-dropdown'>
<ul id='topmobilemenu'>
   <li><a expr:href='data:blog.homepageUrl'><span><i class='icon-home'/></span></a></li>
   
<li class='has-sub'>
<a href='#'><span>Tecnologia</span></a>
      <ul>
         <li><a href='#'><span>Notícias</span></a></li>
<li><a href='#'><span>Downloads</span></a></li>
         <li class='last'><a href='#'><span>Products</span></a></li>
      </ul>
 </li>




   <li class='has-sub'>
<a href='#'><span>Negócios</span></a>
      <ul>
         <li><a href='#'><span>Marketing</span></a></li>
         <li class='last'><a href='#'><span>Location</span></a></li>
      </ul>
   </li>




   <li class='last'><a href='#'><span>Fashion</span></a></li>
   <li class='last'><a href='#'><span>Lifestyle</span></a></li>
  </ul>
</div>
<ul class='social-icons float-right'>
<li class='facebook'><a href='http://facebook.com' target='_blank' title='Facebook'>   <i class='icon-facebook'/>   </a></li> 
    <li class='twitter'><a href='https://twitter.com' target='_blank' title='Twitter'>     <i class='icon-twitter'/>     </a></li>
    <li class='gplus'><a href='https://plus.google.com' target='_blank' title='Google plus'>      <i class='icon-google-plus'/>       </a></li>


</ul>
</div>   
    <div class='clear'/> 

E o CSS pra ele é: (Vou colando a medida que eu for localizando no template)

#menu-dropdown {
max-width: 650px;
float: left;
}
#menu-dropdown {
  border: 0px;
  margin: 0px auto;
  padding: 0px;
  font-size: 14px;
  font-weight: bold;
  width:100%;
  max-width:750px;
  float:left;
}
#menu-dropdown ul {
  background: #333333;
  height: 45px;
  list-style: none;
  margin: 0;
  padding: 0;
}




#menu-dropdown li {
  float: left;
  padding: 0px;
}
#menu-dropdown li a {
  background: #333333 url('http://4.bp.blogspot.com/-eRuYGIJ6kZU/Un8xjrEuaUI/AAAAAAAABto/rEx77zt-lr4/s1600/seperator.gif') center right no-repeat;
  display: block;
  font-weight: 400;
  line-height: 45px;
  margin: 0px;
  padding: 0px 15px;
  text-align: center;
  text-decoration: none;
  font-family: Oswald, arial, Georgia, serif;
  text-transform: uppercase;
  font-size:15px;
}
#menu-dropdown > ul > li > a {
  color: #cccccc;
}
#menu-dropdown ul ul a {
  color: #cccccc;
}
#menu-dropdown li > a:hover,
#menu-dropdown ul li:hover > a {
  background: $(primary.color) url('http://2.bp.blogspot.com/-OIz_gMAJc6M/Un8xjibyHrI/AAAAAAAABt8/cJcD57RyXXY/s1600/hover.png') bottom center no-repeat;
  color: #FFFFFF;
  text-decoration: none;
}
#menu-dropdown li > a i{
  color: #FFFFFF;
  }


#menu-dropdown li ul {
  background: #333333;
  display: none;
  height: auto;
  padding: 0px;
  margin: 0px;
  border: 0px;
  position: absolute;
  width: 225px;
  z-index: 200;
  /*top:1em;
/*left:0;*/


}
#menu-dropdown li:hover ul {
  display: block;
}
#menu-dropdown li li {
  background: url('http://2.bp.blogspot.com/-62RZ4E3cHS8/Un8xkLqHRaI/AAAAAAAABt0/RqGVZ3Xy1Hs/s1600/sub_sep.gif') bottom left no-repeat;
  display: block;
  float: none;
  margin: 0px;
  padding: 0px;
  width: 225px;
}
#menu-dropdown li:hover li a {
  background: none;
}
#menu-dropdown li ul a {
  display: block;
  height: 35px;
  line-height:35px;
  font-size: 12px;
  font-style: normal;
  margin: 0px;
  padding: 0px 10px 0px 15px;
  text-align: left;
}
#menu-dropdown li ul a:hover,
#menu-dropdown li ul li:hover > a {
  background: $(primary.color) url('http://1.bp.blogspot.com/-xW_sOqCx39k/Un8xjlYSKqI/AAAAAAAABts/LJqXWuWTJME/s1600/hover_sub.png') center left no-repeat;
  border: 0px;
  color: #ffffff;
  text-decoration: none;
}
#menu-dropdown p {
  clear: left;
}

Em anexo segue um print do menu atual.

Menu%2BAtual.jpg

Link para o comentário
Compartilhar em outros sites

0 respostass a esta questão

Posts Recomendados

Até agora não há respostas para essa pergunta

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152k
    • Posts
      651,8k
×
×
  • Criar Novo...