2 Attachment(s)
Treelist Menu Navigation Icons
I have created a custom made sliding menu navigation panel, for which I have built navigation arrows for the .x-treelist-item-expander elements that are supposed to point to the right before an item is selected, and down when the item is hovered over or clicked on. I have the right pointing arrows in place, however, when I hover over them, the down pointing arrows appear above the right pointing arrows instead of in place of them. Screenshots are attached.
Here is the code for the right pointing arrow that appears when the menu is first triggered:
/*right pointing arrow*/
.x-treelist-nav .x-treelist-row .x-treelist-item-expander:before {
display: inline-block !important;
width: 0;
height: 0;
margin-left: .255em !important;
vertical-align: .255em !important;
margin-top: 15px;
content: "" !important;
border-bottom: .3em solid transparent !important;
border-left: .3em solid !important;
border-right: 0 !important;
border-top: .3em solid transparent !important;
}
And here is the code for the down pointing arrow:
/*down pointing arrow*/
.x-treelist-nav .x-treelist-row:hover .x-treelist-item-expander{
display: inline-block !important;
width: 0 !important;
height: 0 !important;
margin-left: .255em !important;
margin-top: 20px;
vertical-align: .255em !important;
content: "" !important;
border-top: .3em solid !important;
border-right: .3em solid transparent !important;
border-bottom: 0 !important;
border-left: .3em solid transparent !important;
}
I have tried playing with the margins and padding of the arrows, but that just pushes the right pointing arrow down a bit while still being visible. Any help or insight would be greatly appreciated!