HamSter

задайте не относительные высоту и ширину :after, а фиксированные + :hover:aftertransform: scale(1.1);.

Пример на jsbin

$(document).ready(function(){

        $('.item_element').on('mouseover', function(){
            var $this = $(this),
                el = $this.find('.title_block');
            
            setTimeout(function(){ view_block(el) }, 1500);
        });

        $('.item_element').on('mouseout', function(){
            var $this = $(this),
                el = $this.find('.title_block');

            hide_block(el);
        });

        function view_block(block) {
            block.css({'display':'block', 'opacity':1});
        }

        function hide_block(block) {
            block.css({'display':'none', 'opacity':0});
        }
      
    });

jsbin

.search_button { z-index: 4; }

Можно, например, с помощью flex:

Ссылка на CodePen

ПРИМЕР на CodePen

Зачем спрашивать?
Сделай сначала под 640 и посмотри "встанет" или нет на 320. Если нет, то покажи заказчику, объясни что и как.

li { margin: XXpx; padding: XXpx; }

Сделайте не маркер, а иконку.

<li> <i class="ico-1"></i> <span> телефон </span> </li>

li span,
li i {
  display: inline-block;
  vertical-align: middle;
}

animation-fill-mode: both; - анимация воздействует на элемент и до начала, и после окончания воспроизведения.

ul.tabs-wr - фиксированная ширина.
.text-wr - фиксированная ширина.
Меню вообще не адаптивное, как и многое другое.

3 варианта

1. display: inline-block;
2. display: flex;
3. display: table;

P.S: тег center уже лучше не использовать в html.