Antony Bark

если без хаков, то это стандартное выпадающее (вверх) меню, только иная стилизация
самый чистый по вёрстке способ, - применить на button JS (click) на замену класса стиля ( display: none > display: inline-block )
если не умеете, скажите, скину код

Если без обид, -- бросьте вы это занятие. При необходимости используйте два пути, альтернативные, но грамотные по результату:

1. ищите примеры типографики в готовых дизайнах, что "на глаз упадёт" то и берите
   
2. сотрудничайте с дизайнером, найти такого проще, чем кажется, -- почти у всех дизов проблемы с программированием: то немного JS надо, то чуток PHP, то просто объяснить что-то словами )) - обоюдно и поможете друг другу советами и небольшими одолжениями
   

Самостоятельно типографикой не занимайтесь, даже ради саморазвития, дисциплина очень обширная и глубоко завязана на многие смежные гуманитарные дисциплины, требует специализированного образования, полиграфического опыта. И даже при соблюдении всех этих условий, но без постоянной практики, результат - пшик.
Ну, честно! )

Требование работодателя ради тестирования на вакансию что-то сверстать яркий признак проблем с работодателем в будущем.

Вариантов причин подобного подхода немного:

• В конторе либо нет программиста(ов), способных провести классическое собеседование с будущим коллегой, либо они есть, но в конторе бардак с дисциплиной и ролями. (будет крайне тяжело работать)
  
• Это не контора, а чел "набрал по объявлению", как правило "под идею", в надежде либо развиться во что-то за счёт стартового энтузиазма новичков, либо тупо ставя на использование рабского труда, типа, "не платили и я сам ушёл". (нормальной работы не получится вообще, наниматель вначале немного может и заплатит)
  
• Чистое мошенничество "на доверии", посредничество между заказчиками и разовыми исполнителями. (работы много, вся без оплаты, много нервов)
  
  Любой другой вариант -- из области фантастики.
  
  По стандарту, кандидата просят что-то предъявить, какие-то образцы его работ (если нет портфолио), проводят собеседование (часто не одно). Солидные конторы изучают кандидатов и их скилы ещё до всякого собеседования :)
  
  p.s. имейте свои заготовки, выполненные самостоятельно(не копипаст) и залитые вами на какой-то доступный хостинг, с использованием разных технологий и сеток, например:
  //на чистом CSS //с bootstrap //с *SS(препроцессоры);
  реализация этого добра в виде //трёх-страничного сайта //леддинга //+ какая-нибудь сложная форма (корзина интернет-магазина тут выигрывает)
  Это и показывайте, пары-тройки примеров вполне должно хватить работодателю для оценки культуры и мастерства верстальщика.
  заодно натренируетесь ;)
  Удачи!

в ответе Максима Тимофеева Максим Тимофеев есть решение, но вы Dimka Matsi Dimka Matsi поставили решением свой ответ,
решили именно так, как предложил Максим, хотя ему возразили что решение неверное. Достаточно резко ведёте общение.

off topic moderator
что-то часто (1-2 раза в неделю) стали попадаться топики, где автор ставит решением свой ответ.
Это нормально? Нет, я понимаю, когда не предложено никакого решения, но.. )

table же :)
Пример на table

p.s. заточено под ваши условия

https://learn.javascript.ru/mousemove-mouseover-mo...

советую избавиться от градиентов

мне кажется, это адаптация на основе семейства Futura.. пока не нашёл этого шрифта по соответствиям "б""к""я", найду - отпишусь

единственно вменяемый способ вёрстки, если монитор меньше, чем макет:

1. из фотошоп сохраняем макет 1:1 в jpg\png
2. вставляем его подложкой

html{min-width:1600px;background:red url('maket1600.png') left top no-repeat;}

3. далее верстаем как обычно, подложка неплохо помогает видеть несовпадения вёрстки с макетом, а для просмотра вёрстки, не входящей по ширине в окно, тягаем гориз.скролл*

* т.к. у нас принудительный гор.скрол, то для оценки ошибок вёрстки по ширине даём red, если косяк - справа появится красный край
** учитываейте, что body и остальные слои поверх подложки на время вёрстки обязательно надо background-color: transparent

Всего два реальных пути:
1. Грамотное, обратиться к друзьям и коллегам, нет-ли у них на примете или в запасе скилованного специалиста, с которым имеется опыт работы.
Ваш профит, - вы знаете коллегу, его личные скилы и запросы, и уже по его характеристике будете знать очень много о кандидате. С друзьями чуть опаснее, но профит в человеческом доверии.
2. Разместить в профильных группах подробное объявление о вакансии, с требованием к кандидату оставить публичный комментарии с перечнем скиллов и ссылкой на портфолио.
Ваш профит - цеховики сами "затюкают левых" и их специфическая критика кандидатов (и требований вашей вакансии) поможет вам уточнить ваши требования и описание вакансии (а может и в корне изменить сам запрос).
Второе как раз вы сделали этим вопросом, если я верно понял вашу идею.

Есть работа. Реальный сайт в количестве 1шт.
Советы получите в процессе производства.
скайп antonybark

откуда появляются эти 150px

это стандарт браузера описание вопроса
решение на тостере

может быть так? preserveAspectRatio="none"

С каким-то апломбом и напрягом огораживается Иллюстратор, никто не нападает на AI, cпокойнее господа, спокойнее! Не надо агрессии.

история моих редакторов за 15 лет:
notepad*, php editor, notepad+, sublime*, shorm, idea
* использую и сейчас

тема годная )
если верстак не умеет "писать код руками", применение им бутстрап и прочих "ускоряющих дело" технологий только во вред делу.
от "яростных" поборников технологий бывает потом ох как немало проблем

Г-да, не ломайте копий )

Верстальщик владеет профессионально HTML{XML}\CSS

+ хорошо знаком с рядом графических программ и базовых технологий для уверенной работы с макетами от дизайнеров: иконки, растрово-векторные дела{PNG\SVG}, спрайты.. понимание основ типографики и "usability" очень приветствуется ;-)

+ верстак способен не накосячить в применении шаблонов JS (счётчики, эффекты и проч.)

+ также надо уметь не косячить, верстая в "смешанном" коде, с пересекающимися технологиями (PHP, JAVA, NODEJS ..), понимая основные языки программирования на уровне простейшего синтаксиса, и не более того (понимать механизмы работы "программерского" кода - лишнее, главное понимать, где начинается и где кончается "чужой" код, применение "''" и тд. )
-- в последнем верстальщику вполне помогают специализированные инструменты, подсвечивающие синтаксис и ошибки, например верстать в среде IntelliJ IDEA )

Естественно, знание VCS SFTP/SCP основ работы с хостингом всегда приветствуется

Вообще, умение быстро "раскусывать" проблемы и грамотный подбор инструментария для работы, по-моему, самые важные вещи для верстальщика

всем бобра!