Steve Price Steve Price - 4 months ago 20
CSS Question

Unwanted effect on ul li hover

I have a menu that has the following code (a large amount removed for simplification)

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


cartInfo is a section to the right to show cart value and count. My problem is that the cart area is being affected by the :hover css on the ul and I can't for the life of me find a way to prevent it.

I tried using

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

to cancel out the css that is set on the other li's for the grey hover but this had no effect whatsoever. I've tried so many different variations that I've forgotten what I have and haven't tried. It's probably something so simple that I have just overlooked.
The only hover effect I want on .cartInfo is an underline on the text.

Fiddle is


The issue is caused by this rule:

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

Also, giving the following rule will make sure it doesn't jump:

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

This sets the top and bottom padding. Removing it makes it look good.