Report

Здравствуйте. Необходимо реализовать svg-иконки соцсетей. На картинке снизу соответственно обычное состояние, hover и active.
. В состоянии active у иконки должна появляться тень. Код иконок я вставляю в HTML, и стилизую с помощью CSS. Сначала я пытался реализовать тень с помощью box-shadow inset, применяя её к самому svg. Но в таком случае тень появляется как-бы за элементом
http://codepen.io/Drew96/pen/WxPdvb
Потом я пытался сделать тень с помощью svg-фильтров. Но так как иконка представляет собой круг с «дыркой» по форме значка социальной сети, то тень появлялась не только сверху круга, но еще и под значком.
Тогда я сделал тень, добавив блочный псевдоэлемент к ссылкам. Уже к этому элементу я добавлял тень и абсолютно позиционировал его относительно родительского элемента иконки.
http://codepen.io/Drew96/pen/xOrpkp
Получилось нормально, но в firefox этот вариант работает плохо. Ссылка работает только при нажатии где-то внизу иконки или на самой границе.
Поэтому и появился вопрос, как правильно реализовать такую тень, или как заставить firefox обрабатывать ссылки нормально? Заранее спасибо.

https://jsfiddle.net/Launder/Ly9mLfv4/1/
 
В 21 строчке CSS кода
box-shadow: inset 0 1px 5px rgba(0,0,0,0.2);как только убираешь свойство inset (тень внутрь) тень (наружу) появляется. Как сделать тень внутрь?

http://jsfiddle.net/tr0zurq1/
 
Предполагается, что тень будет именно для каждого элемента: либо для <li>, либо для <a>, а не для <ul>.
По-идее, между элементами тень не должна быть видна, поскольку, z-index псевдоэлемента, для которого сделана тень, меньше z-index'a элемента, для которого сделан псевдоэлемент.
Но тень всё равно есть. Почему? Как расположить тень "дальше" пунктов меню?
<ul> <li><a href="#">Борщ украинский с пампушками</a></li> <li><a href="#">Вареники с печенью в луке с салом</a></li> <li><a href="#">Курица, тушенная с галушками</a></li></ul>ul { position: absolute; list-style: none; margin: 0; padding: 0; word-wrap: break-word; /*перенос слов*/ z-index: 0; }ul a { display: block; position: relative; z-index: 1; background: #ffe5e5; color: #ca575b; padding: 5px 10px; text-decoration: none; }ul a:hover { background: #8bc6ee; color: #fffcfc; }ul a::after { content: ''; display: block; position: absolute; top: 0; bottom: 0; left:0; right:0; box-shadow: 0 0 4px #dd9a9a; z-index: -1; }

http://jsfiddle.net/Launder/d70c2kg1/4/
<ul class="menu"> <li><a href="#">Разные вкусности</a> <ul> <li><a href="#">Суп с клёцками</a></li> <li><a href="#">Пироги с капустой и яйцом</a></li> <li><a href="#">Торт Медовый</a></li> </ul> </li> <li><a href="#">Узбекская кухня</a> <ul> <li><a href="#">Плов по-бухарски с изюмом</a></li> <li><a href="#">Плов с бараниной и нутом</a></li> <li><a href="#">Халва из ядрышек урюка</a></li> <li><a href="#">Лагман по-хорезмски</a></li> </ul> </li> <li><a href="#">Итальянская кухня</a> <ul> <li><a href="#">Феттучини с ветчиной и грибами в сливочном соусе</a></li> <li><a href="#">Пицца по-тоскански с индейкой и грейпфрутом</a></li> <li><a href="#">Кролик по-лигурийски с красным вином</a></li> <li><a href="#">Миндальные бискотти с медом</a></li> </ul> </li></ul>.menu { background: -moz-linear-gradient(to top, #ecc, #fff8f8); background: -webkit-linear-gradient(to top, #ecc, #fff8f8); background: -o-linear-gradient(to top, #ecc, #fff8f8); background: -ms-linear-gradient(to top, #ecc, #fff8f8); background: linear-gradient(to top, #ecc, #fff8f8); border: 1px solid #888; border-top: 0; padding: 0; margin: 0; font-family: Arial, Helvetica, sans-serif; font-size: 0; }.menu > li { display: inline-block; width: 200px; height: 75px; border: 1px solid #fff; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; font-size: 14px; position: relative; }.menu a { text-decoration: none; display: block; }.menu ul { list-style: none; }.menu > li:hover::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; -webkit-box-shadow: inset 0 0 10px #777; -moz-box-shadow: inset 0 0 10px #777; box-shadow: inset 0 0 10px #777; }Почему элемент ul, который является составной частью inline-block элемента li, выходит за его границы, а не растягивает его?
Я это говорю, потому что вижу, что выделяет тень (при наведении на блок).
С другой стороны, inline-block-и, как и должны, выстроились по базовой линии самой нижней строчки текста в них. Значит, всё же, они "чувствуют" вложенный список.
Как объяснить такое двойное поведение?

Хочу получить такую таблицу. Здесь на сером фоне внутренние белые линии (слева и сверху)

 
Cделать через тень, короткое изящное решение http://jsfiddle.net/aykkwbss/
Работает везде, но как обычно IE в своем репертуаре (думал в 10-й версии глюков с тенью не будет). Здесь белые линии смещены на 1px вправо или вниз

 
Вложил DIV в ячейку. У Мозиллы едет верстка, а IE не растягивает DIV http://jsfiddle.net/aykkwbss/5/
Можно решить без JavaScript?