jquery - CSS 自定义 li p 链接

Question

看起来真的很奇怪，因为上次我尝试使用相同的样式并且效果很好，但现在不起作用。我的 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;

谢谢大家的帮助!真的很喜欢 stackoverflow 社区!

Answer 1

试试这个

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