FULL onclick Dropdown menu

by Wolf Wortmann

HTML

<article>
    THIS IS THE FULL VERSION OF THE DROP DOWN MENU.<br>
    IF U WOULD LEARN, GO TO THE EXAMPLE ON:<br><br>
    <a target="_blank" href="http://jsfiddle.net/wolfwortmann/8jUap/">http://jsfiddle.net/wolfwortmann/8jUap/</a><br>
</article>
<hr>
<mnav>
      <div class="open">≡</div>
      <div class="close">x</div>
      <div class="dropdown">
        <ul class="sub_menu">
          <a href="#">
            <li>
            Home               
            </li>
          </a>
          <a href="#">
            <li>
            Web
            </li>
          </a>
          <a href="#">
            <li>
            Contact
            </li>
          </a>
        </ul>
      </div>
     </mnav>
    <div class="msg">
     &lt- CLICK this
    </div>

CSS

a {
  	font-style: normal;
  	text-decoration: none;
  	padding-left: 0px;
    text-align: center;
  }
a:link {
  	color: #000000;
  }
  
a:visited {
    color:  #000000;
  }
a:hover {
  	color: #59CEE5;
    text-shadow: 5px 5px 20px #999999;
    transition: color 0.3s ease 0.2s,text-shadow 0.4s ease 0.1s;
  }
 a:active { color:#59CEE5;
  }
mnav{
  color: #FFFFFF;
  width: 302px;
  text-align: center;
}
mnav li{
  color: #FFFFFF;
  text-shadow: 5px 5px 20px #000000;
}
mnav li:hover {
    color: #59CEE5;
    text-shadow: 5px 5px 20px #999999;
    transition: color 0.3s ease 0.2s,text-shadow 0.4s ease 0.1s;
  }
ul, li{
 
  padding: 0;
  margin: 0;
   list-style: none outside none;
}
li{
  border-top: 1px solid #59CEE5;
}

.open{
    display: inline;
}
.open, .close{
float: left;
color: #FFFDFD;
font-size: 34px;
line-height: 45px;
text-align: center;
-moz-box-sizing: border-box;
background-color: #242424;
border: 1px solid #FFFDFD;
border-radius: 4px;
height: 50px;
width: 50px;

}
.dropdown{

    border: 1px solid #59CEE5;
    display: none;
    height:auto;
    line-height: 50px;
    font-size: 20px;
    width:300px;
    color: #FFFFFF;
    margin-top: 57px;
}
.dropdown li{
    background-color: rgba(0, 0, 0, .8);
    text-align: center;

}
.close{
    display: none;
    line-height: 40px;
}

JavaScript

$(".open").click(function() {
     $(".dropdown").css({ "display":"block" });
    $(".close").css({ "display":"inline" });
    $(".open").css({ "display":"none" });
    $(".msg").css({ "display":"none" });
    

 })

$('.close').click(function() {
    $(".close").css({ "display":"none"});
    $(".open").css({ "display":"inline" });
    $(".dropdown").css({ "display":"none" });
     $(".msg").css({ "display":"inline" });
  
 });

 $('.dropdown ').click(function(event){
     event.stopPropagation();
 });