В макете есть ссылка, которая при наведении превращается в кнопку, при этом ниже выпадает меню, однако между ними есть разрыв. Проблема в следующем: нужно сделать так, чтобы при переводе мыши с кнопки через этот разрыв выпадающее меню не пропадало. Придумал так: сделал невидимую границу вокруг кнопки, подрезав фон background-clip. В итоге всё работает, но возник вопрос: можно ли это сделать как-нибудь по-другому, т.к. эти невидимые границы расталкивают ссылки друг от друга (на макете оно должны быть ближе), а если задавать только нижнюю границу, то с учётом округлых краёв кнопок последние деформируются (( Вот код на песочницу:
(
Код в песочнице грубый, это не выдержка из кода, мне просто нужна идея, поэтому то, на что ведёт ссылка, я создал просто в качестве примера.
Есть еще вариант. Для li вы задаете padding-bottom на 20px допустим. А координату top подменю корректируете так, чтобы подменю на этот padding немного наползало при выпадании.
Вы имеете в виду li основного списка, кнопку? Я задавал для li padding 5px 10px; Если сделать ему padding-bottom: 20px, например, то кнопка дефомируется и увеличится вниз… Или я что-то не так понял? 
UPD: попробовал ещё одну идею: задать невидимую границу самому выпадающему меню и “обкорнать” его тоже с background-clip: padding-box, только в таком случае надо паддинги откорректировать. Тоже работает. Наверное, так лучше - нет границ, которые расталкивают кнопки
Мне в голову пришел тот же вариант, что и Ineska.
Чтобы меню не пропадало размеры и отступы задаются элементам списка, а визуализируются сами ссылки. Применимо к вашему примеру:
https://thimbleprojects.org/temlove/276763
@Ineska, @TemLove - спасибо за отклик. Вроде бы, понял. И всё же, что вы думаете по поводу последнего варианта, который пришёл мне в голову - задавать невидимую границу самому выпадающему меню и обрезать его background-clip?
Я не специалист, но так тоже можно, я думаю.
Можно. Главное, чтобы не было никаких последствий.