Выпадающее меню CSS JS: Расширение области наведения за ссылку изображения

Question

Я пытаюсь повторить навигацию, как показано на сайте www.accenture.com

И это то, чего я смог достичь до сих пор: http://alfadesigntech.com/new/pages/inside-page-template.html

I 'Мы использовали скрипт Java, чтобы показать / скрыть выпадающее меню, которое на самом деле является скрытым элементом с большим количеством ссылок.Проблема в том, что как только я оставляю кнопку меню, раскрывающееся меню снова скрывается.В то время как я могу использовать задержку onmouseout, это не решение, которое я ищу.

Возможное решение, насколько мне известно, состоит в том, чтобы как-то расширить область наведения, чтобы скрыть скрытую коробку.Как мне этого добиться?Есть ли альтернативное решение?

Любая помощь будет высоко оценена .. Заранее спасибо ..

Ps.У меня ограниченное знание javascripts.

Answer 1

вы можете поместить свой div со ссылками в один контейнер с его триггером - это должно помочь.

 <div id="menu-item-1" onmouseover=....>
   <img/>
   <div class="links">Show us on mouseover and hide on mouseout</div>
 </div>

Хотя это часто зависит от конкретной разметки.

Также возможное решение - когда панель ссылок открыта - вы скрываете ее, если мышь находится вне нее, а мышь не находится над привязанным изображением.