javascript - how to make a vertical accordion menu convert from hover to click when resizing at a certain window? -

i want make menu when @ window size, such detecting touch screen devices, menu convert hover click open vertical drop down accordion menu. familiar media queries , responsive/adaptive designs. want browser , touch screen devices convert hover click when detects screen size, , when so, want go hover without having refresh website when resizing bigger window in order go hover. when click option going on detected screen size resize window, stays on click.

thanks of these guys got me started converting vertical accordion menu when detecting window size: how convert horizontal menu vertical submenus vertical accordion menu submenus?

here fiddle

html:

<!--menu under header begins--> <table id="menubar" width="0" border="0" align="center" cellpadding="0" cellspacing="0">    <tr>      <td>        <div id="navmenu"> <!--#navmenu div menu contents start here-->      <ul>   <li>         <a href="index.php" class="mainlist">home</a> </li>  <li>     <a href="about.php" class="mainlist">about me</a> </li>     <li class="slidedown">         <a href="graphicdesign.php" class="mainlist">graphic design</a>     <ul>     <li><a href="graphicdesign/hobbyist-independent.php">hobbyist/independent</a></li>         <li><a href="graphicdesign/job&amp;freelance.php">job & freelance</a></li>     <li><a href="graphicdesign/universityatbuffalo.php">university @ buffalo</a></li>     </ul> </li>   <li class="slidedown">      <a href="webdesign.php" class="mainlist">web design</a>     <ul>     <li>hobbyist/independent</li>     <li>job & freelance</li>     <li>university @ buffalo website</a></li>      </ul> </li>   <li class="slidedown">     <a href="photography.php" class="mainlist">photography</a>     <ul>     <li><a href="photography/hobbyist-independent.php">hobbyist/independent</a></li>     <li><a href="photography/job&amp;freelance.php">job & freelance</a></li>     <li><a href="photography/studentprojects.php">student projects</a></li>     </ul> </li>   <li>     <a href="contactme.php" class="mainlist">contact me</a> </li>      </ul>     </div> <!--#navmenu div menu contents end here-->      </td>   </tr> </table>  <!--menu under header ends--> 

css:

html, body {   height: 100%;   overflow-x:hidden;   overflow-y:hidde;   margin:auto; } #wrap {   margin:auto;   min-height: 100%;   background-image: url(style/flourish-bg.png);   background-repeat:no-repeat;    background-position: top center;   z-index:0; } #header {     width:1024px;      height:160px;     background-repeat: no-repeat; } #bgheader {   background-image: url(style/bgheader.jpg);   background-repeat:repeat-x;   height:160px; }    body {   margin-left: 0px;   margin-top: 0px;   margin-right: 0px;   background-repeat: no-repeat;   background:#000; }  /*----------menu-----------*/   /*main menu*/  a:link {color:#fff; text-decoration:none;} a:visited {color: #868d65;} a:hover {color:#000;} a:active {color: #868d65;}  #navmenu {   width:100%;   height:80px;   margin-right:auto;   margin-left:auto; }  /*holds listed items on main menu*/ #navmenu ul {   width:100%;   margin:0;   padding: 0;   list-style:none;   text-decoration:none; }  /*keeps main menu horiztonal, , effects actualy list items, overrides other menu float*/ #navmenu li {   float:left;      padding: 30px 7px;    position:relative;   list-style:none;    text-decoration:none;   font-family: georgia, "times new roman", times, serif;   font-size:12px;   text-decoration: none;   border-top: 2px solid  #868d65;   border-bottom: 2px solid  #868d65;   transition: border-radius 1s, background 1s;   -moz-transition: -moz-border-radius 1s, background 1s;   -webkit-transition: -webkit-border-radius 1s, background 1s;   z-index:200; }  /*menu styling hover, when image added, applies hover actions on every menu*/ #navmenu li:hover {   background: #eee;   background-image: url(style/bgheader.jpg);    transition: border-radius 1s, background 1s;  -moz-transition: -moz-border-radius 1s, background 1s;  -webkit-transition: -webkit-border-radius 1s, background 1s;  z-index:200; } /*sub menu starts*/   /*this hides submenu*/ #navmenu  li ul {   position: absolute;   top:75px;   visibility:hidden;   padding-left:0px; } /*this shows submenu on hover on main menu*/ #navmenu  li:hover ul {visibility:visible;}  /*sub menu styling*/ #navmenu li ul li {   float:none;   width: 160px;   font-size:12px;   text-align:center;   padding: 15px 5px 10px 5px;   background: #222222;   border: 1px solid #fff;    color: #fff;   position:relative;   margin-left: -6px; }  /*sub menu styling hover*/ #navmenu li ul li:hover {   font-size:12px;    color: #000;    background-color: #868d65; }  @media (max-width:600px) { tr td #navmenu li { width:100%; // makes each item takes whole screen } tr td #navmenu li ul { position:relative !important; // removes position absolute doesn't overlap   higher menu items top:0; // puts right next menu item display:none; // there no unnecessary white space when `li` isn't being hovered on } tr td #navmenu li:hover ul { display:block; // shows submenu when hover on higher `li`s } }