SubMenu com slide

Um submenu a aparecer e a desaparecer com mousehover

by NunoMira

HTML

<nav>
		<ul>
			<li id="nav-button">
				<a id="nav-click" href="#">Menu <i class="fa fa-bars"></i></a>
				<ul class="sub-nav">
					<li><a href="#">Link1</a></li>
					<li><a href="#">Link2</a></li>
					<li><a href="#">Link3</a></li>
					<li><a href="#">Link4</a></li>
				</ul>
			</li>
		</ul>
	</nav>

CSS

nav {
  position: absolute;
  left: 50%;
  top: 11px;
  font-family: "Lato", sans-serif;
  font-size: 14px;
  cursor: pointer; }
  nav #nav-click {
    margin: 0;
    text-transform: uppercase;
    color: #BFB5B5;
    transition: all 0.3s; }
  nav ul {
    padding: 0;
    margin: 0; }
  nav li {
    padding: 0;
    list-style-type: none; }

#nav-button {
  position: relative;
  border-radius: 30px;
  border: 1px solid #BFB5B5;
  padding: 5px 15px;
  transition: all 0.3s;
  background-color: #ffffff;
  z-index: 109; }
  #nav-button:hover, #nav-button:focus {
    border-color: #4A4040; }
    #nav-button:hover #nav-click, #nav-button:focus #nav-click {
      color: #4A4040; }
  #nav-button .fa {
    margin-left: 5px; }

.sub-nav {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: -100%;
  left: -25%;
  width: 150%;
  transition: all 0.3s; }
  .sub-nav li {
    float: left;
    width: 100%;
    text-align: center;
    background-color: #ffffff; }
    .sub-nav li a {
      padding: 7px;
      display: block;
      font-size: 14px; }

.show-nav {
  visibility: visible;
  opacity: 1;
  top: 100%;
  padding-top: 10px; }

JavaScript

// Mobile nav touch hover script
$(document).ready(function(){

	var container = $('#nav-button');
	var list = $('.sub-nav');
	
	var flag = false;

container.bind('touchstart', function(){
  if (!flag) {
    flag = true;
    setTimeout(function(){ flag = false; }, 260);
	 list.toggleClass('show-nav');
  }
  return false
});
    
container.hover(function(){
	 list.addClass('show-nav');
	}, function(){
	 list.removeClass('show-nav');	
	});
});