I am facing an issue with a menu script in my HTML code that looks like this:
<ul class="cbp-tm-submenu" style="left: 50px;">
<li><a href="#" class="cbp-tm-icon-screen">Sorrel desert</a></li>
<li><a href="#" class="cbp-tm-icon-mail">Raisin kakadu</a></li>
<li><a href="#" class="cbp-tm-icon-contract">Plum salsify</a></li>
<li><a href="#" class="cbp-tm-icon-pencil">Bok choy celtuce</a></li>
<li><a href="#" class="cbp-tm-icon-article">Onion endive</a></li>
<li><a href="#" class="cbp-tm-icon-clock">Bitterleaf</a></li>
:after <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
</ul>
Currently, I am working with this class:
.cbp-tm-submenu:after {
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
}
The output displays an arrow, and my issue is that the arrow is positioned too far to the left. I want to move the arrow to the right, below the sale. Is it possible to select the :after class in jQuery to adjust the arrow's position? If so, how can I achieve this?