html - Open/Close menu On click using only javascript no jquery -

this html file

<form id="form1" runat="server">     <div class ="mvbar">         <ul>             <li><a href ="m">home</a></li>             <li><a href ="m">about</a></li>             <li class="pjlist" onclick="load"><a href ="m">projects</a>                 <div class="sub1">                 <ul>                     <div class="arrow1"></div>                     <li><a href ="m">projects1</a></li>                     <li><a href ="m">projects2</a></li>                     <li><a href ="m">projects3</a></li>                 </ul>                 </div>             </li>             <li class="svlist" onclick="load"><a href ="m">services</a>                 <div class="sub2">                 <ul>                     <div class="arrow2"></div>                     <li><a href ="m">services1</a></li>                     <li><a href ="m">services2</a></li>                     <li><a href ="m">services3</a></li>                     <li><a href ="m">services4</a></li>                     <li><a href ="m">services5</a></li>                 </ul></div>             </li>             <li><a href ="m">contact us</a></li>         </ul>     </div>     </form> 

and css class

.mvbar ul {    list-style:none;    margin:0;    padding:0; }  .mvbar li {     float:left;     width:15%;     text-align:center;     background-color:grey;     border-right:1px solid white;     position:relative; }  .mvbar li ul{     position:absolute;     top:30px; }  .mvbar li ul li{     float:none;     width:210%;     text-align:left;     padding-left:4px;  }   .mvbar {     font-family:'meiryo ui',verdana,sans-serif;     color:black;     text-decoration:none;     display:block; }  .arrow1 {     width:0;     height:0;     border-left:12px solid transparent;     border-right:12px solid transparent;     border-bottom:12px solid grey;     position:relative;     right:-80%; }  .arrow2 {     width:0;     height:0;     border-left:12px solid transparent;     border-right:12px solid transparent;     border-bottom:12px solid grey;     position:relative;     right:-80%; }  .sub1 {     visibility:hidden; }  .sub2 {     visibility:hidden; } 

i can same thing in css requires many exceptions added work in each , every browser javascript haven't used before , suggested can easy it. please can tell me how open/close sub-menu using javascript.

thanks in advance!!!

try work on 'hover' event not on 'click' full css.

.mvbar ul {    list-style:none;    margin:0;    padding:0; }  .mvbar li {     float:left;     width:15%;     text-align:center;     background-color:grey;     border-right:1px solid white;     position:relative; }  .mvbar li ul{     position:absolute;     top: 100%;     width: 50%; }  .mvbar li ul li{     float:none;     width:210%;     text-align:left;     padding-left:4px;  }   .mvbar {     font-family:'meiryo ui',verdana,sans-serif;     color:black;     text-decoration:none;     display:block; }  .arrow2, .arrow1 {     width:0;     height:0;     border-left:12px solid transparent;     border-right:12px solid transparent;     border-bottom:12px solid grey;     position:relative;     right:-80%; }  .sub1, .sub2 {     visibility:hidden; }   ul li:hover div {     visibility: visible; }  ul li:hover ul {     visibility: visible; }