Problem with css menu

Question

Guys I set up a menu in css that works very well, the problem that when placing the mouse cursor on top of menu letter it changes, it seems to change its edges.

Can someone help me solve this?

Follows the code:

.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>

Answer 1

Without an example page it is a little difficult to see your problem, but try to take the edges of this snippet of your 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 */
}

But if you can create an example page it would be better.