How to do Menu Dropdown with popping effect

I do not know if this is what you want. I usually use the bootstrap menu and can also get this effect. If you need help, just say so.

$(function () {
	$(".menu2").hide();

	$(".open").stop(true, true).mouseover(function() {		
        $(".menu2").fadeIn(100).animate({ opacity:'1' }, 400);
    });	
  
    $(".open").mouseleave(function() {
      $(".menu2").stop(true, true).fadeTo('fast').animate({ opacity: '0' }, 100).hide();
    })
});

#conteudo{
	width:100%;
	height:300px;
	background:#36C;
	}
.menu{
	width:1365px;
	height:30px;
	background:#F00;
	margin:0px auto;
	}
.menu1{
	width:450px;
	height:30px;
	background:#FFF;
	}
.menu1 li{
	width:150px;
	height:30px;
	background:#FF0;
	list-style:none;
	float:left;
	} 
.menu2{
	width:150px;
	height:90px;
	background:;
    opacity:0;
	position:relative;
	display:block;
-webkit-animation: KEYFRAME-NAME 5s infinite;
  -moz-animation:    KEYFRAME-NAME 5s infinite;
  -o-animation:      KEYFRAME-NAME 5s infinite;
  animation:         KEYFRAME-NAME 5s infinite;
	}
.menu2 li{
	width:150px;
	height:30px;
	background:#C30;
	top:20px;
	position:relative;
}
.menu2 li:hover{
	width:150px;
	height:30px;
	background:#C60;
	top:20px;
	position:relative;
}
menu1 li ul li .open{
	widht:150px;
	height:500px;
	background:#096;
	position:absolute;
	display:block;
	}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divid="conteudo">
  <nav class="menu">
    <ul class="menu1">
      <li>Teste1</li>
      <li class="open">Teste2
        <ul class="menu2">
          <li>Sub-Teste1</li>
           <li>Sub-Teste2</li>
         </ul>
      </li>
      <li>Teste3</li>
     </ul>
  </nav>    
</div>

Israel, I do not quite understand the purpose of your menu, whether it's just to study CSS and jquery or if you're really going to develop an application.

If it's the second case, I suggest using Bootstarp to save your development time. If this is the first case, I suggest using Bootstrap for you to use your study time in a professional tool, and that has already been made to adptar to mobile devices, mobile phones, tablets, etc.

This library is very easy and already does all the work for you. You do not have to spend your developer time on behavior and designing objects because everything is ready, just copy and paste. There is a version of the site in Portuguese , but I do not know if the translation is already complete. On Bootstrap's own site you will already find many, many types of menus. But if you're not satisfied, you can go to the Bootsnip site and look for the object that interests you, in that case, menu . There you will find a huge variety of menus. If you want to learn Bootstrap and exactly with the menu of your question I suggest the W3School site.

I've done 2 dropdown examples:

//HTML
    <div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
  <span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li><a href="#">HTML</a></li>
    <li><a href="#">Nivel 1</a></li>
    <li><a href="#">JavaScript</a></li>
  </ul>
</div>
<br/>
<br/>
<br/>                        
  <div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorials
    <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><a tabindex="-1" href="#">HTML</a></li>
      <li><a tabindex="-1" href="#">CSS</a></li>
      <li>
        <a class="test" tabindex="-1" href="#">New dropdown <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a tabindex="-1" href="#">2nd level dropdown</a></li>
          <li><a tabindex="-1" href="#">2nd level dropdown</a></li>
          <li>
            <a class="test" href="#">Another dropdown <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#">3rd level dropdown</a></li>
              <li><a href="#">3rd level dropdown</a></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </div>


//Js jQuery
$(document).ready(function(){
  $('.dropdown a.test').on("click", function(e){
    $(this).next('ul').toggle();
    e.stopPropagation();
    e.preventDefault();
  });
});

You basically work with HTML, the minimum of javascript and practically zero css. Use the Bootstrap attributes and you're done. Their menu is smoking. See the example I created here in this link .