Андрей Голуменов

.nav5 ul > li:hover ul {
max-height: 1000px;
-webkit-transform: perspective(400) rotate3d(0, 0, 0, 0);
opacity: 1;
}
.nav5 li ul {
position: absolute;
left: 0;
z-index: 1;
max-height: 0;
overflow: hidden;
-webkit-transform: perspective(400) rotate3d(1, 0, 0, 90deg);
-webkit-transform-origin: 50% 100%;
-webkit-transition: 350ms;
-moz-transition: 350ms;
-o-transition: 350ms;
transition: 350ms;
margin-top: -100%;
top: -10px;
opacity: 0;
}

Сделайте блок инлайн-блоком он автоматически ужмется по контенту. Либо Спозиционируйте блок абсолютно
display: inline-block;

Копайте в сторону map метода массива
msdn.microsoft.com/ru-ru/library/ie/ff679976(v=vs....

Например так: codepen.io/golumenov/pen/GuKlH?editors=110
Ток иконку поменяйте сами)

Почитайте эту статью www.overclockers.ru/lab/62218/Vybor_optimalnoj_vid...
и выберите для себя оптимальный вариант сами

Можно сделать как-то так:
codepen.io/golumenov/pen/sKFiq?editors=110
С шрифтами и размерами особо не заморачивался, подбирайте сами.

$('.text_add').remove();

Примеры кода в студию. Ну или сходите к гадалкам

#blok3 и #blok2 не влезают в 320px

для начала предоставьте ссылку

Проще всего в фотошопе.
И что значит от краев к центру? В центре прозрачная по краям непрозрачная или наоборот? Я что-то запутался.
Фон под картинкой однотонный? Если да можно попробовать накинуть сверху градиентную заливку через :after

Можно сделать используя area и map, работает даже в старых браузерах