Как сделать фокус при наведении на выпадающие меню?

Question

[Anto]

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

$(document).ready(function() {
    $(".root-item").hover(
   function(){ 
      $(this).children('.sss').css('display','block');      // навели курсор на объект   
      $(this).next('ul').css('margin-top','0px'); 
   },function(){
    $(this).children('.sss').css('display','none');      // отвели курсор с объекта     
        });
  });

<?if (!empty($arResult)):?>
<div class="horizontal-top-menu-color">
<ul class="horizontal-top-menu">
		<div class="bg-menu-right"></div>
		<div class="bg_menu-left"></div>
<?
$previousLevel = 0;
foreach($arResult as $arItem):?>
	<?if ($previousLevel && $arItem["DEPTH_LEVEL"] < $previousLevel):?>
		<?=str_repeat("</ul></li>", ($previousLevel - $arItem["DEPTH_LEVEL"]));?>
	<?endif?>
	<?if ($arItem["IS_PARENT"]):?>
		<?if ($arItem["DEPTH_LEVEL"] == 1):?>
			<li><a href="<?=$arItem["LINK"]?>" class="<?if ($arItem["SELECTED"]):?>root-item-selected<?else:?>root-item<?endif?>"><?=$arItem["TEXT"]?>
			<div class="sss"></div></a>
				<ul>
		<?else:?>
			<li<?if ($arItem["SELECTED"]):?> class="item-selected"<?endif?>><a href="<?=$arItem["LINK"]?>" class="parent"><?=$arItem["TEXT"]?>
			<div class="sss"></div>
			</a>
				<ul>
		<?endif?>
	<?else:?>
		<?if ($arItem["PERMISSION"] > "D"):?>
			<?if ($arItem["DEPTH_LEVEL"] == 1):?>
				<li><a href="<?=$arItem["LINK"]?>" class="<?if ($arItem["SELECTED"]):?>root-item-selected<?else:?>root-item<?endif?>"><?=$arItem["TEXT"]?>
				<div class="sss"></div>
				</a>
				</li>
			<?else:?>
				<li<?if ($arItem["SELECTED"]):?> class="item-selected"<?endif?>><a href="<?=$arItem["LINK"]?>"><?=$arItem["TEXT"]?>
				<div class="sss"></div>
				</a>
				</li>
			<?endif?>
		<?endif?>
	<?endif?>
	<?$previousLevel = $arItem["DEPTH_LEVEL"];?>
<?endforeach?>
<?if ($previousLevel > 1)://close last item tags?>
	<?=str_repeat("</ul></li>", ($previousLevel-1) );?>
<?endif?>
</ul>
</div>
<div class="menu-clear-left"></div>
<?endif?>

Answer 1

[Ankhena]

Задать подчеркивание при наведении на родительский элемент, а не на саму ссылку основного меню. Либо на js добавлять ссылке класс типа .active

https://jsfiddle.net/bjcj98Lm/

Comments

[Anto]

у меня поддерживание сделано другим цветом и для его вывода прописанно

[Ankhena]

ANTON K.:

поддерживание сделано другим цветом и для его вывода прописанно

на русский переведите, пожалуйста?

[Anto]

У родительского пункта меню поддерживание выводится с помощью цвет поддерживания золенный, Данный способ если я не ошибаюсь под эту возможность не подходит!?

[Ankhena]

ANTON K.: да какая разница какие туда стили написать, важно к какому селектору применять

https://jsfiddle.net/whap7f4n/

[Anto]

Спасибо!

[Anto]

Ankhena W: Подскажи пожалуйста, как сделать так что бы подчеркивание было только у первой ссылки у Компании а у выпадающего списка его не было?

[Ankhena]

ANTON K.: li:hover > a:after заменить на .item:hover > a:after

https://jsfiddle.net/skfLvbgk/

[Anto]

Ankhena W: Спасибо большое!