theWaR_13: Все дело в позиционировании относительно "близости" к экрану.
По умолчанию, элементы расположенные в коде ниже отображаются выше (ближе). Для наглядности - https://jsfiddle.net/ty038y65/ . Поэтому правый блок перекрывает тень от левого.
Что бы этого избежать надо приподнять нужный блок. Для этого Михаил Макарычев верно указал z-index для #green:hover. Но z-index применится только к элементам, у которых строго задано позиционирование relative, absolute или fixed.
Теоретически, можно было обойтись без z-index, и указать только #green:hover{position:relative}. Это само по себе вытолкнет блок над всеми элементами, у которых позиционирование строго не задано.
