It's strange because the last time I tried to apply the same styling, it worked perfectly. However, now it's not working. Here is a snippet of my HTML:
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false><span><img src="test1.png"></span>TEST!<span class="caret"></span</a>
<ul class="dropdown-menu">
<a rel="nofollow" href="../test1"><li><p><img src="/assets/flags/test1.png"> Test1</p></li></a>
</ul>
</li>
CSS:
.dropdown-menu > a > li > p {
clear: both;
line-height: 1.42857143;
color: #555;
white-space: nowrap;
transition: color .2s ease;
}
.dropdown-menu > a:focus > li > p,
.dropdown-menu > a:hover > li > p {
color: #ff7500 !important;
text-decoration: none;
transition: color .2s ease;
}
Thank you for your assistance, everyone! I really appreciate the support from the stackoverflow community!