Как сделать так, чтобы: всплывающие эффекты расширяли границы?

Question

У меня есть несколько текстовых ссылок внутри списка, затем в двух div. Я хочу, чтобы эффекты при наведении простирались за пределы списка за пределы внешнего элемента div. Есть ли способ сделать это с отрицательным дополнением? По-другому? Можно вообще?

Визуализация будет проще

Как сейчас -

Подсветка отступов в окружающем div-

Как я хочу, чтобы эффект a: hover выглядел-

В основном код выглядит так -

.1 { padding: 10px;}
.2 { padding: 5px;}

<div class="1">
  <div class="2">
    <ul>
      <li>
        <a>abcde</a>
      </li>
      <li>
        <a>fghij</a>
      </li>
    </ul>
  </div>
</div>

Answer 1

Отрицательные поля / отступы недействительны и работают не так, как ожидалось, но возможно, вы должны убрать все поля его родителей и добавить отступы для ссылок, чтобы получить тот же эффект, но со всеми широкими якорями:

/* CSS CODE */ 
.parent { padding:0px; border:1px solid red }
.child { padding:0px; }
.parent h2 { margin:10px; font-size:22px; }
.child ul li a { display:block; padding:10px 15px; }
.child ul li a:hover { background:green; }

Вы можете увидеть пример в: http://jsfiddle.net/3zANs/

Answer 2

Отрицательный отступ недействителен (и просто не будет работать), с другой стороны, отрицательный отступ действителен, и это может быть полезно в вашем случае.

Полагаю, также недопустимы классы, которые помечены цифрами.