Aspeto dos submenus

Qual é minha questão:
Olá.
É possível mudar os aspetos dos menus e consequente hover?

Os meus estão assim: http://gyazo.com/2b456b40744f49156d9da1c9bf88a02f
Queria assim: http://gyazo.com/df6332c261335c8092675c61ff24feed

Queria mudar só mesmo o fundo deles (estilo).
Obrigado.

Endereço do meu fórum:
http://foradjogo.forumeiros.com

Versão do fórum:
PUNBB

Olá!

Use este CSS:

Código:

li.has-sub, li.has-sub ul li {
background-color: #1c3b5f !important;
line-height: 40px !important;
border-bottom: 1px solid grey !important;
}
li.has-sub:nth-child(4) {
background: none !important;
line-height: 12px !important;
border-bottom: 0px !important;
}

Resultado: http://prntscr.com/2xsrki
Foi o melhor que consegui. Não consegui o hover :/
E uma opinião pessoal, prefiro como está, o estilo está mais em contexto.

Hancki

Não ficou igual amigo.xD

Nunca ficará igual porque o outro site tem uma estrutura HTML diferente, classes atribuídas mais diversificadas. É complicado modificar o seu menu, acredite. Não sei como o fazer mais, ou então todo o menu fica desconfigurado.

Hancki

Amigo, pode então colocar riscas pretas a dividir como na imagem?
E já agora o mesmo estilo de letra com cor branca.

Para as linhas pretas:

Código:

li.has-sub, li.has-sub ul li {
border-bottom: 1px solid black !important;
}
li.has-sub:nth-child(4) {
border-bottom: 0px !important;
}

Em relação à cor branca, não aconselho. Não existe uma classe específica para o botão principal e então ficará branco, enquanto que os outros principais são pretos de predefinição.

Hancki

Resultou, mas tem como colocar a letra igual? Se tiver posso testar.

Quanto aos submenus em si, aparecem por baixo do avatar, veja:
http://gyazo.com/8280a2dc519bf1b818bfbcb97fb34a89

Só vejo desta forma possível...
Para o tipo de letra funcionar... nova página JS, investido em todas as páginas com o código:

Código:

WebFontConfig = {
    google: { families: [ 'Titillium+Web::latin' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })();


E um CSS:

Código:

li.has-sub, li.has-sub ul li {
z-index: 9999 !important;
}
#cssmenu a {
font-family: Titillium Web;
}

Veja o resultado: http://prntscr.com/2xupyq
Destaquei o avatar da ultima mensagem, para ver como esse problema já não ocorre. E repare o tipo de letra. Terá que ser em todo o menu.

Hancki

Tá resolvido, muito obrigado.
Uma última dúvida, onde mudo a cor para branco nos submenus?

Nos códigos CSS que lhe passei, os primeiros, procure pela linha:

Código:

background-color: #1c3b5f !important;

Substitua por:

Código:

background-color: white !important;

Hancki

Resolvido, pode fechar e muito obrigado.