<div id="nav">
<div class="button_menu">
<a href=""> О НАС </a>
</div>
<div class="drop_menu">
<div class="title">
<h2> О НАС </h2>
<span><a href=""> Календарь событий </a></span>
<span><a href=""> Сотрудничество </a></span>
<span><a href=""> Международная деятельность </a></span>
<span><a href=""> Лицензии и сертификаты </a></span>
<span><a href=""> Закупочная деятельность </a></span>
<span><a href=""> Раскрытие информации </a></span>
<span><a href=""> Вакансии </a></span>
<span><a href=""> Наши партнеры </a></span>
</div>
<div class="next_drop_menu">
</div>
<div class="description">
<span>
<p></p>
</span>
</div>
</div>
</div>
<script type="text/javascript" charset="utf-8">
$(function(){
$('#nav .button_menu').hover(function(){
$(this).next('.drop_menu').stop(false, true).fadeIn(300);
$(this).children('a').addClass('selected');
},function(){
$(this).next('.drop_menu').stop(false, true).fadeOut(300);
$(this).children('a').removeClass('selected');
});
});
</script>
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
@font-face {
font-family: firasans; /* Имя шрифта */
src: url(firasans.ttf); /* Путь к файлу со шрифтом */
}
body {
max-width: 1440px;
}
#Head {
width: 1280px;
}
#nav {
width: 1200px;
height: 50px;
margin: 0 auto;
}
.button_menu {
width: 10%;
height: 100%;
list-style: none;
float:left;
}
.button_menu a {
width: 100%;
height: 100%;
text-decoration: none;
font-size: 14px;
font-family: firasans;
color: #fff;
background-color: #232323;
display: block;
text-align: center;
}
.button_menu a:hover{
background-color: #797979;
color: #fff;
}
.selected {
background-color: red;
color: #fff;
}
.drop_menu{
display: none;
position: absolute;
top:50px;
left:40px;
width: 1200px;
background-color: red;
}
.drop_menu:hover {
display: block;
}
.title {
float:left;
width: 310px;
}
Нужно что бы при наведении на блок он отображал др. блок. Он должен быть видим до тех пор, пока мышь не покинет отображаемый блок. Вот не могу понять что поправить в JS.
Средний
