Здравствуйте!
Есть сайт http://serv1[dot]web-kg[dot]ru/ вверху меню с картинками и надписями "Для дома", "Для Бизнеса" и т.д.
при наведении на них появляется подменю. В целом работает нормально, но если курсор поставить немного ниже текста, то подменю сразу пропадает. Нужно сделать, чтобы курсор можно было перемещать полностью по всей площади этого подменю. Подскажите, пожалуйста, как это сделать.
Вот коды:
index.html:
CODE ( html):
скопировать код в буфер обмена
<li class="item item-1"> <span class="link"><span>ДЛЯ ДОМА</span></span> <div class="border-fix"><div class="border-corner-fix"></div></div> <ul> <li class="subitem"> <a href="/home/ohrana-kvartir">ОХРАНА КВАРТИРЫ</a> </li> <li class="subitem"> <a href="/home/ohrana-kottedjej">ОХРАНА КОТТЕДЖА</a> </li> </ul> </li>
CSS меню:
CODE ( html):
скопировать код в буфер обмена
.p-header-menu li.item-1 .border-fix, .p-header-menu li.item-2 .border-fix { position: absolute; width: 139px; height: 12px; left: 0px; bottom: -12px; border-left: 2px solid #0098E3; background: #fff; z-index: 3; } .p-header-menu li.item-1 .border-fix .border-corner-fix, .p-header-menu li.item-2 .border-fix .border-corner-fix { position: absolute; height: 10px; width: 10px; right: -8px; border-left: 2px solid #0098E3; border-bottom: 2px solid #0098E3; border-radius: 0px 0px 0px 5px } .p-header-menu li.item li.subitem .icon.edit { display: inline-block; position: relative; left: 1px; top: 0px; width: 20px; height: 20px; margin: 0 -4px 0 -2px; vertical-align: top; } .p-header-menu li.subitem { display: inline-block; text-align: center; vertical-align: top; margin: 0 18px 0 0; background: url("/style/images/subitem-dot.png") no-repeat left 5px; padding-left: 14px; font-size: 12px; } .p-header-menu li.subitem.active { background: url("/style/images/subitem-active-dot.png") no-repeat left 5px; cursor: default; } .p-header-menu li.subitem.active a { color: #3E3E3E; border-bottom: none; } .p-header-menu li.subitem a { display: inline; font-size: 11px; color: #0098E3; text-decoration: none; border-bottom: 1px solid #7fcbf1; } .p-header-menu li.subitem a:hover { border-color: #fff; }
Спасибо!
|