CSS custom li p links

Question

Seems really weird becouse last time i trying put same styling and works perfect, but now not working. My HTML looks like that:

<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;

thanks for helping guys! really like stackoverflow community!

Answer 1

Try this one

 .dropdown-menu > li > a > p { clear: both; line-height: 1.42857143; color: #555; white-space: nowrap; transition: color .2s ease; } .dropdown-menu > li > a:focus > p, .dropdown-menu > li > a:hover > p{ color:#ff7500 !important; text-decoration: none; transition: color .2s ease; border: 1px solid #e6e6e6; } li { list-style-type: none; } a{ text-decoration: none; } 

 <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"> <li><a rel="nofollow" href="../test1"><p><img src="/assets/flags/test1.png"> Test1</p></a></li> </ul> </li> 

Answer 2

Here's your HTML structure updated with a more correct structure :

<ul class="dropdown-menu">
  <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>
  </li>
  <li>
    <a rel="nofollow" href="../test1">
      <img src="/assets/flags/test1.png"> Test1
    </a>
  </li>
</ul>

See this fiddle

The ul structure was incorrect in your example, see docs here :

Docs :

https://developer.mozilla.org/en/docs/Web/HTML/Element/ul

Be also careful about the difference between inline and block elements, see docs here :

Docs :

https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements#Block-level_vs._inline

https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements