Simple Hover menu

Tutorials of (Simple hover menu) by Kirsty bewley

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Simple Hover menu</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <ul class="first">
  <li><a href="#">hi</a></li>
  <li><a href="#">hi</a></li>
  <li class="ex"><a href="#">hi</a>
    <ul class='second'>
      <li><a href="#">hi</a></li>
      <li><a href="#">hi</a></li>
    </ul>
  </li>
</ul>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

    <script  src="js/index.js"></script>

</body>
</html>
/* Downloaded from https://www.codeseek.co/ */
a {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  display: block;
}

ul {
  background: #567567;
  padding: 0;
  margin: 0;
  position: relative;
  width: 100%;
  float: left;
  z-index: 1;
}
ul li {
  padding: 1em;
  background: #765765;
  float: left;
  list-style: none;
  outline: 1px solid;
  width: 100px;
}
ul li.active {
  background: #567567;
}
ul li:hover {
  background: #456456;
}
ul li.ex:hover .second {
  opacity: 1;
  z-index: 1;
  visibility: visible;
  -webkit-transition: opacity 0.5s ease, z-index 0s ease;
}
ul.second {
  position: absolute;
  left: 0;
  width: 100%;
  background: #865865;
  opacity: 0;
  z-index: 0;
  visibility: hidden;
  box-sizing: border-box;
}
ul.first {
  position: relative;
}
/* Downloaded from https://www.codeseek.co/ */

/*$( "ul li.ex" ).on({ 
   mouseenter: function() {
    $( this ).children('ul').addClass( "show" );
  }, mouseleave: function() {
    $( this ).children('ul').removeClass( "show" ); 
  } 
}); 
$( "ul li.ex" ).hover(function(){
  $( this ).children('ul').toggleClass( "show" );
});*/
$height = $('ul.first').height();
$('ul.second').css('top', $height + 'px' );

This awesome code ( Simple Hover menu ) is write by Kirsty Bewley, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © Kirsty Bewley