Question

我有一个菜单，其中包含以下代码（为简化而删除了大量代码）

<div id="mega-wrapper"data-sticky_column>
<ul class="mega-menu menu_red">  
<li class="home-li"><a class="drop" href="http://localhost/doorentrydev/">Home</a></li>

<!-- bof offers -->
<li><a href="http://localhost/doorentrydev/index.php?main_page=FILENAME_OFFERS" class="drop">Offers</a></li>
<!-- eof offers -->

<li class="spacer"></li>

<li class="cartInfo"><a class="cartInfo" href="http://localhost/doorentrydev/index.php?main_page=shopping_cart" class="drop">0<span class="cartText">Item(s) | £0.00Ex VAT</span></a></li>

</ul>
</div>

cartInfo是右侧显示购物车价值和计数的部分。我的问题是购物车区域受到了：ul悬停css的影响，我无法在生活中找到防止它的方法。

我尝试使用

.cartInfo li:hover{border:none; padding:O;}

取消其他li上为灰色悬停设置的CSS，但这没有任何效果。我已经尝试了很多不同的变化，我已经忘记了我所拥有的并且没有尝试过。它可能是如此简单，以至于我忽略了。我想要的唯一悬停效果.cartInfo是文本的下划线。

小提琴是https://jsfiddle.net/xmfnqwz0/

Answer 1

问题是由此规则引起的：

.mega-menu li:hover {
  padding: 8px 0 10px 0;
}

另外，给出以下规则将确保它不会跳转：

.mega-menu li.cartInfo {
  border: 1px solid transparent;
}

设置顶部和底部填充。删除它使它看起来很好。

小提琴：https://jsfiddle.net/169t4po6/

ul li hover

1 个答案: