Problem with menu in css

1

Can anyone help me solve this?

Follow 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>
    
asked by anonymous 21.03.2016 / 13:02

1 answer

1

Without an example page it's a bit difficult to see your problem, but try to get rid of the edges of this 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 a sample page it would be better.

    
21.03.2016 / 13:11