Sub-menu

[Linton Junior 0]

Galera, não manjo muito de css, então paciência, eu estava querendo colocar um sub-menu em um menu que já estava em um site.

Porém fui adicionar e não aparece, achei que era o z-index, daí percebi que é porque ele é todo css.

 

Segue o html:

<div id="cssmenu-up">
<div id='cssmenu'>
<ul>
   <li><a href='index2.php'><span>Home</span></a></li>
   <li><a href='phpquemsomos.php'><span>quem somos</span></a>
   <ul>
   <li><a href='teste.php'><span>SUB-MENU</span></a></li>
   </ul>
   </li>
   <li><a href='galeria-img.php'><span>Galeria de imagens</span></a></li>
   <li><a href='#'><span>Galeria</span></a></li>
   <li><a href='#'><span>Cursos</span></a></li>
   <li class='last'><a href='#'><span>Contato</span></a></li>
   
</ul>
</div>
</div>

E o css:

@import url(http://fonts.googleapis.com/css?family=Open+Sans:700);
#cssmenu-up{width:1000px; margin:0 auto;}
#cssmenu {
  background: #6fab00;
  width: 700px;
  margin:0 auto;

}
#cssmenu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  line-height: 1;
  display: block;
  zoom: 1;
}
#cssmenu ul:after {
  content: ' ';
  display: block;
  font-size: 0;
  height: 0;
  clear: both;
  visibility: hidden;
}
#cssmenu ul li {
  display: inline-block;
  padding: 0;
  margin: 0;
}
#cssmenu.align-right ul li {
  float: right;
}
#cssmenu.align-center ul {
  text-align: center;
}
#cssmenu ul li a {
  color: #ffffff;
  text-decoration: none;
  display: block;
  padding: 15px 25px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 11px;
  position: relative;
  -webkit-transition: color .25s;
  -moz-transition: color .25s;
  -ms-transition: color .25s;
  -o-transition: color .25s;
  transition: color .25s;
}
#cssmenu ul li a:hover {
  color: #ffffff;
}
#cssmenu ul li a:hover:before {
  width: 100%;
}
#cssmenu ul li a:after {
  content: '';
  display: block;
  position: absolute;
  right: -3px;
  top: 19px;
  height: 6px;
  width: 6px;
  background: #ffffff;
  opacity: .5;
}
#cssmenu ul li a:before {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 0;
  background: #333333;
  -webkit-transition: width .25s;
  -moz-transition: width .25s;
  -ms-transition: width .25s;
  -o-transition: width .25s;
  transition: width .25s;
}
#cssmenu ul li.last > a:after,
#cssmenu ul li:last-child > a:after {
  display: none;
}
#cssmenu ul li.active a {
  color: #2b3e09;
}
#cssmenu ul li.active a:before {
  width: 100%;
}
#cssmenu.align-right li.last > a:after,
#cssmenu.align-right li:last-child > a:after {
  display: block;
}
#cssmenu.align-right li:first-child a:after {
  display: none;
}
@media screen and (max-width: 768px) {
  #cssmenu ul li {
    float: none;
    display: block;
  }
  #cssmenu ul li a {
    width: 100%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-bottom: 1px solid #90de00;
  }
  #cssmenu ul li.last > a,
  #cssmenu ul li:last-child > a {
    border: 0;
  }
  #cssmenu ul li a:after {
    display: none;
  }
  #cssmenu ul li a:before {
    display: none;
  }
}

Minha dúvida é como adicionar o submenu aí.

Agradeço a quem puder ajudar :joia:

[victorqueiroz 34]

1. http://www.maujor.com/tutorial/ddownmenu-a.php

[Linton Junior 0]

Não adiantou :)

Eu teria que refazer tudo de novo e não é essa a proposta do tópico.

Mas valeu.

[William Bruno 1501]

Adicione essas linhas:

#cssmenu ul ul {
  display: none;
  position: absolute;
  top: 40px;
  left: 0;
}
#cssmenu li { position: relative; }
#cssmenu li:hover ul {
  display: block;
  background: #6fab00;
}

[Linton Junior 0]

 

Aeeeee, é quase isso, cara.

Só preciso fazer ele ficar mais harmonioso, veja só como já melhorou em 500%

www.yamazonia.com.br/index2.php

 

Ajeitei, preciso só que me ajude a colocar aquele quadradinho no último.

[William Bruno 1501]

Que quadradinho ? e o que é harmonioso ?

 

Poste um print do layout que vc deseja.

[Linton Junior 0]

William Bruno, eu consertei, harmonioso é que seja agradável.