After spending a solid 3 hours searching without success, I am feeling incredibly frustrated and in need of assistance.
Below is my HTML code:
<div class="dropdown-content">
<dl class="subDL">
<dt><a href="#">- Mark Attendance <span class="li-icon">»</span></a></dt>
<dl class="subDL">
<dt><a href="#">- Arrival Time</a></dt>
<dt><a href="#">- Departing Time</a></dt>
</dl>
<hr size=1 width="98%" color= #003E6B />
<dt><a href="#">- Summary</a></dt>
</dl>
</div>
CSS Styles
.dropdown-content a:hover,dt:hover {
background-color: #fff;
color:#004d85;
}
.move:hover .dropdown-content {
display: block;
}
dt:nth-child(1):hover .li-icon{
color: #0076bc;
text-shadow: 0px 0px 1px #0076bc;
font-size: 20px;
}
dl.subDL dt > ul.subDL{
display: none;
}
.dropdown-content dl > dt:hover > ul{
display: block;
}