Efeito hover do menu

Detalhes da questão

Endereço do fórum: http://www.brasilplayultimate.com.br
Versão do fórum: PunBB

Descrição

Eae pessoal, gostaria desse efeito hover : http://prntscr.com/gh35bp nesse menu do meu fórum : http://prntscr.com/gh36yw

Seria possível ?

UP

CSS:

Código:

.second-level-menu::before {
    display: none;
}

.second-level-menu > li,
.third-level-menu > li {
    background-color: #333 !important;
}

.second-level-menu > li:after  {
    border-color: #fff
}

#community_app_menu a {
    color: #fff !important;
}

Kyo Panda escreveu:CSS:

Código:

.second-level-menu::before {
    display: none;
}

.second-level-menu > li,
.third-level-menu > li {
    background-color: #333 !important;
}

.second-level-menu > li:after  {
    border-color: #fff
}

#community_app_menu a {
    color: #fff !important;
}

Olá Kyo, você apenas personalizou ele, eu queria o efeito hover, a caixa pode deixar do jeito que está.

Você diz a caixa branca e a borda azul?

Kyo Panda escreveu:Você diz a caixa branca e a borda azul?

Abra o site que falei : http://proxstudio.forumeiros.com/ e passe o mouse sobre o "products" esse efeito que quero, quando passar o mouse, o jeito que aparece, entendeu ?

Adicione ao final de seu CSS:

Código:

#primary_nav #community_app_menu li ul {
  display: block !important;
  z-index: 9999 !important;
  transition: none !important;
}

#primary_nav #community_app_menu * {
  transition: none !important;
}

#primary_nav #community_app_menu li > ul::before {
  display: none;
}

#primary_nav #community_app_menu li:hover > ul::before {
  display: block;
}

#primary_nav #community_app_menu li > ul > li {
  height: 0px;
  font-size: 0px;
  opacity: 0;
  visibility: hidden;
  transition: height 200ms linear !important;
}

#primary_nav #community_app_menu li:hover > ul > li {
  height: 32px;
  visibility: visible;
  font-size: 13px;
  opacity: 1;
}

Sou obrigado a dizer que já está complicado de trabalhar sobre o seu fórum, pois existem muitos !important's nele, o que dificulta — e muito — nosso trabalho, nos obrigando a usá-los também, o que prejudica a qualidade de seu CSS.

o/

Luiz escreveu:Adicione ao final de seu CSS:

Código:

#primary_nav #community_app_menu li ul {
  display: block !important;
  z-index: 9999 !important;
  transition: none !important;
}

#primary_nav #community_app_menu * {
  transition: none !important;
}

#primary_nav #community_app_menu li > ul::before {
  display: none;
}

#primary_nav #community_app_menu li:hover > ul::before {
  display: block;
}

#primary_nav #community_app_menu li > ul > li {
  height: 0px;
  font-size: 0px;
  opacity: 0;
  visibility: hidden;
  transition: height 200ms linear !important;
}

#primary_nav #community_app_menu li:hover > ul > li {
  height: 32px;
  visibility: visible;
  font-size: 13px;
  opacity: 1;
}

Sou obrigado a dizer que já está complicado de trabalhar sobre o seu fórum, pois existem muitos !important's nele, o que dificulta — e muito — nosso trabalho, nos obrigando a usá-los também, o que prejudica a qualidade de seu CSS.

o/

Perfeito, valeu
Sobre os !important realmente tenho que tirar algum dia desses pra re-ver todo meu CSS e vê se consigo reduzi-lo para não causar esse tipo de problema, até pq é chato até para mim que tenho uma "base" em CSS e não consigo resolver tais coisas simples...
Enfim.. Obrigado pelo aviso e pelo código.