Como fazer isso no meu menu

Qual é minha questão:
Quando o mause não ta encima do menu https://2img.net/h/s6.tinypic.com/n391yg_th.jpg
ai quando eu passo o mause encima fica assim oh https://2img.net/h/s6.tinypic.com/ipz7f8_th.jpg

Links e imagens do meu problema:
O forum onde eu ve isso foi http://suportedesign.forumeiros.com/

Endereço do meu fórum:
http://forumxbox360.forumais.com/forum

Versão do meu fórum:
PHPBB3

Olá,

Tente o seguintes CSS:

Código:

 #page-header .navbar ul.linklist li{background:url(http://i.imgur.com/indNh.png) bottom;padding:6px 3px 6px 9px}#page-header .navbar ul.linklist li:hover{background:url(http://i.imgur.com/jaLTx.png)}#page-header .navbar{background:url(http://i.imgur.com/indNh.png) bottom;border:1px solid #1293ba;margin-top:-10px}#page-header .navbar ul.linklist li a{color:#fff;font-size:12px;text-shadow:.1em 0 .2em #555}#page-header input.button2{background:#e6b406 url(http://i66.servimg.com/u/f66/11/66/91/15/bg_btn10.png) repeat-x top;color:#4b3b04;font-family:Verdana,Arial,Helvetica,sans-serif;font-size:14px;font-weight:700;padding:5px;width:auto!important} .linklist.navlinks a:hover{-moz-transition:all .2s linear;-o-transition:all .2s linear;-webkit-transition:all .2s linear;background:url(http://i42.servimg.com/u/f42/17/32/13/00/menu-s14.png) no-repeat 50% -2px;padding:5px;position:relative;transition:all .2s linear}

Se entendi bem, o que solicita é:

Código:

 .linklist.navlinks a:hover{-moz-transition:all .2s linear;-o-transition:all .2s linear;-webkit-transition:all .2s linear;background:url(http://i42.servimg.com/u/f42/17/32/13/00/menu-s14.png) no-repeat 50% -2px;padding:5px;position:relative;transition:all .2s linear}

Até Mais!

então entre no meu forum e olhe como fico queria deixa igual ao do forum que eu coloquei encima

Boas,
adicione em sua folha de estilo css:

Código:

#page-header .navbar ul.linklist {
    border-bottom: 0px;
    }
    #page-header .navbar span.corners-top, #page-header .navbar span.corners-top span, #page-header .navbar span.corners-bottom, #page-header .navbar span.corners-bottom span {
    display: none;
    }

    #page-header .headerbar span.corners-top, #page-header .headerbar span.corners-top span, #page-header .headerbar span.corners-bottom, #page-header .headerbar span.corners-bottom span {
    background-image: none;
    }
#page-header .navbar ul.navlinks{
background-color: transparent;
}
/*seta no menu ao passar o mouse*/
a.mainmenu{
-moz-transition: all .2s linear;
-o-transition: all .2s linear;
-webkit-transition: all .2s linear;
background: url(http://i42.servimg.com/u/f42/17/32/13/00/menu-s14.png) no-repeat 40% -10px;
padding-top: 14px;
position: relative;
transition: all .2s linear;
}
a.mainmenu:hover {
background: url(http://i42.servimg.com/u/f42/17/32/13/00/menu-s14.png) 50% 0% no-repeat;
padding-top: 6px;
}

Resultou?

Olá para ajeitar aquele erro você precisa do código certo do menu sem o efeito e depois com o efeito.

Eu sei porque eu usava esse menu.


Até amigo.

então foi a seta agora eu queroa essa barra aqui oh https://i.servimg.com/u/f44/15/64/80/11/br_bar10.png no menu junto com a seta e junto ao logo igual o forum a cima

Boas,
troque por este amigo:

Código:

/*menu mas atualizado*/
#page-header .navbar ul.linklist {
    border-bottom: 0px;
    }
    #page-header .navbar span.corners-top, #page-header .navbar span.corners-top span, #page-header .navbar span.corners-bottom, #page-header .navbar span.corners-bottom span {
    display: none;
    }

    #page-header .headerbar span.corners-top, #page-header .headerbar span.corners-top span, #page-header .headerbar span.corners-bottom, #page-header .headerbar span.corners-bottom span {
    background-image: none;
    }

    #page-header .navbar ul.linklist li{
    padding: 6px 3px 6px 5;
    background: url(http://i44.servimg.com/u/f44/15/64/80/11/br_bar10.png) bottom;
    }

    #page-header .navbar ul.linklist li:hover{
    background: url(http://i44.servimg.com/u/f44/15/64/80/11/br_bar10.png);
    }

    #page-header .navbar {
    border: 1px solid #2C5787;
    background: url(http://i44.servimg.com/u/f44/15/64/80/11/br_bar10.png) bottom;
    }

    #page-header .navbar ul.linklist li a{
    color: #fff;
    font-size: 12px;
    text-shadow: 0.1em 0em 0.2em #555;
    }

    #page-header input.button2 {
    width: auto !important;
    padding: 20px 20px;
    font-size: 14px;
    font-weight: bold;
    font-family: Verdana,Arial,Helvetica,sans-serif;
    color: #4b3b04;
    background: #e6b406 url('http://i44.servimg.com/u/f44/15/64/80/11/br_bar10.png') repeat-x top;
    }
#page-header .navbar ul.navlinks{
background-color: transparent;
}

fico ruim olha la no meu forum como fico

Boas,
amigo tente tirar a caixa de busca e outra, centralize o menu!

então amis fico repetindo a imagem queria que ficase so uma barra em verde

Boas,
adicione este código em sua folha de estilo depois do código passado para o efeito no menu:

Código:

p.nomargin {
font-size: 1.1em;
line-height: 1.3em;
margin-bottom: 0;
display: none !important;
}

pronto cara agora so falta o efeito cara com a setinha

Olá,

Qual efeito falta agora? Não compreendi, para o mais adicione em teu CSS:

Código:

 a.mainmenu:hover{-moz-transition:all .2s linear;-o-transition:all .2s linear;-webkit-transition:all .2s linear;background:url(http://i42.servimg.com/u/f42/17/32/13/00/menu-s14.png) no-repeat 50% -2px;padding:5px;position:relative;transition:all .2s linear}

Até mais.