You are trying to show a div element when you hover over the li element with css, but these two elements are not related to each other. However, this can be done with jquery. First, you will need two classes: .hidden {aisplay: none} .show {aisplay: block} for the nav-hidden element, and then you need to write something like this in jqery (although this is a straightforward pipets, but for you to understand the principle) :
;(function($, window, document) { $('.nav-visible').on('mousemove', function() { $('.nav-hidden').removeClass('hidden').addClass('show'); }); $('.nav-visible').on('mouseout', function() { $('.nav-hidden').removeClass('show').addClass('hidden'); }); }(window.jQuery, window, document));
Classes for hidden item:
.nav-hidden { font-size: 1rem; box-shadow: 0 5px 10px rgba(0,0,0,0.2); } .hidden {display: none;} .show {aisplay: block}
In general, of course you should not write like this, it would be better to implement this by inserting a drop-down block into the necessary list item of the main menu, it would cost one css. For example, like this: https://www.mobila.name/post/5172c6cbb4ab3/
======> ANSWER TO A QUESTION FROM COMMENT I am really ashamed of this code, I will rewrite it humanly, but so far:
;(function($, window, document) { $('.nav-visible').on('mouseover', function() { $('.nav-hidden').css('display', 'block') .animate({opacity:1}, 400); }); $('.hidden').on('mouseleave', function() { $(this).fadeOut(300, function() { $(this).animate({opacity:0}, 100).css('display', 'none'); }); }); $('.someClassInNav').on('mouseover', function() { $('.nav-hidden').fadeOut(300, function() { $(this).animate({opacity:0}, 100).css('display', 'none'); }); }); }(window.jQuery, window, document));
class for a hidden item (show and hidden classes from the previous version need to be removed):
.nav-hidden { font-size: 1rem; box-shadow: 0 5px 10px rgba(0,0,0,0.2); opacity: 0; display: none; }
And you need to add another class for navigation:
<ul class="nav nav-fill"> <li class="nav-item someClassInNav"><a href="#">О фонде</a></li> <li class="nav-item someClassInNav"><a href="#">СМИ о нас</a></li> <li class="someClassInNav"><a href="#">Наши меценаты</a></li> <li class="nav-item nav-visible"><a href="#">Отчеты</a></li> <li class="nav-item someClassInNav"><a href="#">Благодарности</a></li> <li class="someClassInNav"><a href="#">Помочь Нам</a></li> <li class="nav-item someClassInNav"><a href="#">Наша группа</a></li> </ul>
Whole code.
;(function($, window, document) { $('.nav-visible').on('mouseover', function() { $('.nav-hidden').css('display', 'block') .animate({opacity:1}, 400); }); $('.hidden').on('mouseleave', function() { $(this).fadeOut(300, function() { $(this).animate({opacity:0}, 100).css('display', 'none'); }); }); $('.someClassInNav').on('mouseover', function() { $('.nav-hidden').fadeOut(300, function() { $(this).animate({opacity:0}, 100).css('display', 'none'); }); }); }(window.jQuery, window, document));
body { margin: 0 auto; font-family: ProximaNovaRegular, sans-serif; color: #232527; background-color: #fff;} .block-white { max-width: 1170px; margin: 0 auto;} .block-black { margin: 0 auto; background-color: #f2f3f5;} .nav li { border-right: 1px solid #232527; display: inline-block;} .nav li:last-child { border: none; } .nav li a { padding: 10px 20px; color: #232527; font-size: 0.875rem;} .nav-fill>li:first-child { text-align: left; padding-left: 0px;} .nav-fill>li:last-child { text-align: right; padding-right: 30px;} .nav li a:hover { background-color: #d50317; color: white; text-decoration: none;} .nav-hidden { font-size: 1rem; box-shadow: 0 5px 10px rgba(0,0,0,0.2); opacity: 0; display: none; } .nav-hidden hr { height: 3px; background-color: #d50317; margin-top: 4px;} .nav-hidden .conteiner { margin-left: 15px; margin-right: 15px;} .nav-hidden a { color: #232527;} .nav-hidden a:hover { text-decoration: none; color: #d50317;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!DOCTYPE html> <head> <link rel="stylesheet" type='text/css' href="css.css" /> </head> <body> <ul class="nav nav-fill"> <li class="nav-item someClassInNav"><a href="#">О фонде</a></li> <li class="nav-item someClassInNav"><a href="#">СМИ о нас</a></li> <li class="someClassInNav"><a href="#">Наши меценаты</a></li> <li class="nav-item nav-visible"><a href="#">Отчеты</a></li> <li class="nav-item someClassInNav"><a href="#">Благодарности</a></li> <li class="someClassInNav"><a href="#">Помочь Нам</a></li> <li class="nav-item someClassInNav"><a href="#">Наша группа</a></li> </ul> </div> <div class="nav-hidden hidden"> <div class="block-big-white"> <hr> <div class="block-white"> <div class="conteiner"> <div class='row'> <div class="col-3"><a href="#">Медецинские учреждения</a></div> <div class="col-1"><a href="#">Детям</a></div> <div class="col-2 offset-2"><a href="#">Другим категориям</a></div> <div class="col-3 offset-1"><a href="#">Отчет о фин поступлениях и тратах</a></div> </div> <di class='row'> <div class="col-3"><a href="#">Социальные учреждения</a></div> <div class="col-1"><a href="#">Семьям</a></div> <div class="col-3 offset-2"><a href="#">Акты передачи гум помощи</a></div> </di> </div> </div> </div> <script src="jquery-2.1.1.min.js"></script> <script src="js.js"></script> </div> </body> </html>
