1

Galera montei um menu em css que esta funcionado muito bem, o problema que que ao colocar o cursor do mouse em cima de letra do menu ele muda, parece que altera suas bordas.

Alguém pode me ajudar a solucionar isso?

Segue o código:

.aside-menu {
  z-index: 1000;
  position: fixed;
  height: 100%;
  top: 40px;
  bottom: 0px;
  left: 0px;
  width: 35px;
  background: #F1F1F1;
}


#cssmenu ul,
#cssmenu ul li,
#cssmenu ul ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
#cssmenu ul li.hover,
#cssmenu ul li:hover {
    position: relative;
    cursor: default;
}
#cssmenu a {
    background-color: #F1F1F1;
    color: #484848;
    display: block;
    text-decoration: none;
    padding-top: 15px;
    padding-left: 10px;
}
#cssmenu ul {
    border-right: 2px solid #0fa1e0;
    list-style: none;
}
#cssmenu > ul > li:hover:after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    right: 0;
    top: 50%;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 10px solid #0fa1e0;
    margin-top: -4px;
}
#cssmenu .has-sub:hover > ul {
    display: block;
}
#cssmenu .has-sub ul {
    display: none;
    position: absolute;
    width: 150px;
    top: 5px;
    left: 100%;
}
#cssmenu .has-sub ul li a {
    background: #0fa1e0;
    filter: none;
    display: block;
    line-height: 120%;
    padding: 10px;
    color: #ffffff;
}
#cssmenu .has-sub ul li:hover a {
    background: #0c82b5;
}
#cssmenu .has-sub .has-sub:hover > ul {
    display: block;
}
#cssmenu .has-sub .has-sub ul {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
}
#cssmenu .has-sub .has-sub ul li a:hover {
    background: #09638a;
}
<div class="aside-menu font-1">
    <div id='cssmenu'>
        <ul>
           <li class='active has-sub'><a href='#'><span>b</span></a>
                <ul>
                    <li class='has-sub'><a href='#'><span>Product 1</span></a>
                        <ul>
                            <li><a href='#'><span>Sub Product</span></a></li>
                            <li class='last'><a href='#'><span>Sub Product</span></a></li>
                        </ul>
                    </li>
                    <li class='has-sub'><a href='#'><span>Product 2</span></a></li>
                </ul>
            </li>
        </ul>
    </div>
</div>

7
  • Aqui não aconteceu isso. Commented 21/03/2016 às 12:11
  • basta colocar o cursor em cima da letra B que ela fica mais clara. Commented 21/03/2016 às 12:32
  • Não estou vendo isso aqui não. Quando passa o mouse sobre o B aparece o SubMenu. Commented 21/03/2016 às 12:33
  • tenta dar um zoom na tela Commented 21/03/2016 às 12:37
  • acabei de perceber que o erro so ocorre com o safari e com IE Commented 21/03/2016 às 12:38

1 Resposta 1

1

Sem uma página de exemplo fica um pouco difícil ver seu problema, mas tente tirar as bordas desse trecho do seu css:

#cssmenu > ul > li:hover:after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    right: 0;
    top: 50%;
    border-top: 10px solid transparent; /* Remover */
    border-bottom: 10px solid transparent; /* Remover */
    border-right: 10px solid #0fa1e0; /* Remover */
    margin-top: -4px; /* Também pode ser isto */
}

Mas se puder criar uma página de exemplo seria melhor.

6
  • Não deu certo. basta colocar o cursor em cima da letra B que ela fica mais clara. Tenta dar um zoom na tela que vc ve o problema melhor Commented 21/03/2016 às 12:36
  • acabei de perceber que o erro so ocorre com o safari e com IE Commented 21/03/2016 às 12:38
  • Se o erro só ocorre nesses navegadores pode ser a formatação própria que eles aplicam aos links. No seu css tente colocar #cssmenu a:hover { color: #484848 !important; } pra ver se resolve. Commented 21/03/2016 às 14:28
  • não deu certo :/ Commented 21/03/2016 às 14:31
  • Tem algum link pra mim testar no internet explorer, porque essa pagina do stack não da pra abrir nele. Commented 21/03/2016 às 14:33

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .