Currently, I am working on designing some UI elements. Specifically, in the dropdown menu section, I have the following HTML code:
<div class="dropdown">
<div class="dropdown-toggle mytextformcontrol" data-toggle="dropdown">
<a href="#" class="indigo pull-left">Dropdown</a>
<div class="pull-right roundcontainer">
<div class="round1"></div>
<div class="round2"></div>
<div class="round3"></div>
<div class="round4"></div>
</div>
</div>
<ul class="dropdown-menu">
<li><a href="#" class="effectbtn" >Messages</a> </li>
<li><a href="#" class="effectbtn">Events</a> </li>
<li><a href="#" class="effectbtn">Settings</a> </li>
</ul>
</div>
Additionally, here is the CSS styling for the above HTML code:
.dropdown-toggle.mytextformcontrol {
width: 100%;
cursor: pointer;
overflow: auto;
}
.roundcontainer {
position: absolute;
height: 100%;
width: 50px;
right: 0px;
top: 0px;
background-color: #505ce5;
overflow: hidden;
}
.round1,.round2,.round3,.round4 {
position: absolute;
border-radius: 100%;
height: 30px;
width: 30px;
background-color: rgba(255,255,255,0.65);
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.roundcontainer:hover .round1 {
transform: scale(0.5);
}
.dropdown-menu {
width: 100%;
box-shadow: none;
top: 125%;
font-size: 18px;
padding: 0px;
border: none;
background-color: #505ce5;
border-radius: 0px;
}
.dropdown-menu:after {
content: "";
position: absolute;
right: 40px;
top: -20px;
border-width: 10px;
border-color: transparent transparent #505ce5 transparent;
border-style: solid;
}
.dropdown-menu li a {
color: #fff;
border-bottom: 1px solid #fff;
padding: 20px;
transition: all 0.2s;
}
.dropdown-menu li:last-child a{
border-bottom: none;
}
.dropdown-menu li a:hover {
color: #505ce5;
background-color: transparent;
z-index: 1;
}
.dropdown-menu li a.effectbtn:hover:before {
z-index: -1;
}
Here's an image of the current UI design: https://i.sstatic.net/mVJNK.png
The issue I'm facing is that the up arrow generated with a pseudo-class loads after the dropdown menu slides down. How can I ensure that it loads prior to the dropdown menu sliding?