Как только на кнопку наведен курсор через setTimeout запускаем отсчет до появления меню, если курсор уведен с кнопки, то отменяем таймаут через clearTimeout.

var timesArray = [];

$('.menu').hover(
    function()
    {
        var id = jQuery.data(this);
        timesArray[id] = setTimeout(function() {
            //Показываем меню
            $(this).css({'display' :  'block'});
            timesArray[id] = "";
        }, 500);
    },
    function()
    {
        var id = jQuery.data(this);
        //Скрываем меню
        $(this).css({'display' :  'none'});
        if (timesArray[id])
        {
            clearTimeout(timesArray[id]);
        }
    }
);

Попробуйте.

Я бы сделал вот так:

button#search_button {
            background: url('img/search.png') no-repeat center left;
            height: 36px;
            width: 90px;
            text-align: end;
}

Например вот.

$("#one1").on("click", function() {
  if ($("#one1").prop("checked"))
  {
    $(".main-block").css("display", "none");
  }
  else
  {
    $(".main-block").css("display", "block");
  }
});

Пример

Воспользуйтесь:

function is_touch_device() {
    return !!('ontouchstart' in window);
}

и в случае, если функция вернет true, замените hover на click.

Для массового ресайза исходных картинок я бы посоветовал использовать morgify. Это позволит одной командой изменить, например, все файлы с расширением PNG в текущей папке до нужного размера:
$ mogrify -resize 165x165 *.png
Также доступно для windows тут. Ну а потом, минуя фотошоп, смело можно генерировать спрайты любимым сервисом. Мне данный способ очень помогает.