@Para_Lapok

Горизонтальное меню с выпадающим горизонтальным меню?

Я создала горизонтальное меню. У некоторых пунктов меню появляются подменю, они тоже горизонтальные. С помощью jQuery они появляются и исчезают. Проблема в том, что я не могу остановить исчезающее подменю даже наведя на него курсор. Я работаю пока с первым пунктом (у остальных просто появляются подменю) и мне нужно, чтобы при наведении на пункт меню появлялось подменю, при наведении подменю оно не исчезало. Когда я убираю курсор с любого из меню, подменю должно исчезнуть.

CSS:
#main_block{
		position: fixed;
	    z-index: 999;
	    width: 100%;
	}
	.main_menu{
	    padding: 10px 0px 0px 50px;
	    background: #a5c33c;
	    width: 100%;
		border: #a5c33c;
    }
	.main_menu a{
		color: white;
		font-size: 14px;
		margin-right: 20px;
		text-decoration: none !important;
	}
	.company, .projects, .partners, .responsibility{
		width: 100%;
		background: whitesmoke;
	    padding: 10px 0px 10px 50px;
	    float: left;
	    display: none;
		z-index: 998;
    }
    .under_menu{
		text-decoration: none !important;
    	color: black;
		font-size: 13px;
		margin-right: 20px;
	}
	.under_menu:hover{
		color: black;
		}


HTML:
<div id="main_block">
<nav class="main_menu">
  <ul class="nav nav-pills">
  	<li class="nav-item">
      <a href="https://sigma.irksite.ru/"><img src="/upload/landing/955/Bezymyannyy_1x_1x.png" width="90" style=" margin-right: 20px; margin-bottom: 10px;"></a>
    </li>
    <li class="nav-item">
      <a href="https://sigma.irksite.ru/okompanii/" id="company">Компания</a>
    </li>
    <li class="nav-item">
      <a href="https://sigma.irksite.ru/proekty/" id="projects">Проекты</a>
    </li>
    <li class="nav-item">
      <a href="https://sigma.irksite.ru/pustayastranitsa/" id="investors">Инвесторам</a>
    </li>
    <li class="nav-item">
      <a href="https://sigma.irksite.ru/sotsialnayaotvetstvennost/" id="responsibility">Ответственность</a>
    </li>
    <li class="nav-item">
      <a href="https://sigma.irksite.ru/novosti/" id="press-center">Пресс-центр</a>
    </li>
    <li class="nav-item">
      <a href="https://sigma.irksite.ru/postavshchikam/" id="partners">Партнёрам</a>
    </li>
    <li class="nav-item">
      <a href="https://sigma.irksite.ru/kontakty/" id="kontacts">Контакты</a>
    </li>
  </ul>
</nav>

<nav class="company" style="margin-top: -10px;">
	<ul class="nav nav-pills">
		<li class="nav-item">
		  <a class="under_menu" href="#block347">История</a>
		</li>
		<li class="nav-item">
		  <a class="under_menu" href="#block363">Структура</a>
		</li>
		<li class="nav-item">
		  <a class="under_menu" href="#block371">Совет деректоров</a>
		</li>
		<li class="nav-item">
		  <a class="under_menu" href="#block654">Менеджмент</a>
		</li>
	</ul>
</nav>

<nav class="projects">
	<ul class="nav nav-pills">
		<li class="nav-item">
		  <a class="under_menu" href="https://sigma.irksite.ru/pustayastranitsa3/">Геология и запасы</a>
		</li>
		<li class="nav-item">
		  <a class="under_menu" href="#block606">Производство</a>
		</li>
		<li class="nav-item">
		  <a class="under_menu" href="https://sigma.irksite.ru/pustayastranitsa5/">Горные работы</a>
		</li>
		<li class="nav-item">
		  <a class="under_menu" href="#block628">Обогащение</a>
		</li>
		<li class="nav-item">
		  <a class="under_menu" href="#block633">Программа развития</a>
		</li>
	</ul>
</nav>

<nav class="responsibility">
	<ul class="nav nav-pills">
		<li class="nav-item">
		  <a class="under_menu" href="#">Окружающая среда</a>
		</li>
		<li class="nav-item">
		  <a class="under_menu" href="#">Охрана труда и техника безопасности</a>
		</li>
		<li class="nav-item">
		  <a class="under_menu" href="#block197">Социальная ответственность</a>
		</li>
	</ul>
</nav>

<nav class="partners">
	<ul class="nav nav-pills">
		<li class="nav-item">
		  <a class="under_menu" href="#block575">Поставщикам</a>
		</li>
		<li class="nav-item">
		  <a class="under_menu" href="https://sigma.irksite.ru/vakansii/">Карьера у нас</a>
		</li>
	</ul>
</nav>
</div>


jQuery:
<script type="text/javascript">
$(document).ready(function(){
	$('#company').hover(function(){
		$('.company').css('display','block');
        $('.projects').css('display','none');
        $('.responsibility').css('display','none');
        $('.partners').css('display','none');
    });
    $('#company').mouseout(function(){
		$('.company').css('display','none');
    });
    $('.company').hover(function(){
		$(this).css('display','block');
    });
    $('.company').mouseout(function(){
		$(this).css('display','none');
    });
	$('#projects').hover(function(){
		$('.company').css('display','none');
        $('.projects').css('display','block');
        $('.responsibility').css('display','none');
        $('.partners').css('display','none');
    });
    $('#responsibility').hover(function(){
		$('.company').css('display','none');
        $('.projects').css('display','none');
        $('.responsibility').css('display','block');
        $('.partners').css('display','none');
    });
    $('#partners').hover(function(){
		$('.company').css('display','none');
        $('.projects').css('display','none');
        $('.responsibility').css('display','none');
        $('.partners').css('display','block');
    });

});
</script>


Там мои попытки оставить подменю при наведении... не знаю, как грамотно сделать.
  • Вопрос задан
  • 11 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы