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

.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;

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

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

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

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

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

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

Из моего опыта: Одним списком дело не обойдется. Вам в любом случае придется формировать 3 списка, поскольку одним списком и средствами html+css такое сделать не получится.
Поэтому: Либо формируете 3 списка средствами php, либо отдаете на сайт один список и уже там формируете из этого списка 3 списка средствами javascript

Есть мнение, что назначение css стилей через #id работает в разы медленней, чем через .class и по этому лучше не использовать #id для задания стилей.