title: show submenu click and fix
body: <p>This is my  <strong><a href="http://jsfiddle.net/59yTX/" rel="nofollow">JSFIDDLE DEMO</a></strong></p>
  
  <p>Hover works fine, but I want to show the sub menu when i click on an option locks the submenu and then if hover on the main menu,  display sub menu options but to stay on the other, </p>
  
  <p>any help? </p>
  
  <pre><code>&lt;div id="cssmenu"&gt;
  
  &lt;div class="divul"&gt;
      &lt;ul&gt;
          &lt;li class="has-sub"&gt;
              &lt;a&gt;Buscador&lt;/a&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a&gt;Busqueda Datos&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a&gt;Estadisticas&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li class="has-sub"&gt;
              &lt;a&gt;Clientes&lt;/a&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a&gt;Buscador Clientes&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a&gt;Nuevo Cliente&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li class="has-sub"&gt;
              &lt;a&gt;Incidencias&lt;/a&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a&gt;Nuevo Incidencia&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a&gt;Buscador Incidencias&lt;/a&gt;&lt;/li&gt;
  
              &lt;/ul&gt;
          &lt;/li&gt;
  
  
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>    #cssmenu{
      border-bottom: 1px solid #278204;
      margin-top: 10px; 
  }
  
  
  #cssSubmenu{
      background-color: #CCCCCC;
      height: 30px;
      /*margin-top: 10px;*/ 
  }
  
  #cssmenu ul{
      height: 21px;
      display: inline-block;
      background-color: #278204;
      margin-left: 15px;
      padding-top: 5px;
  }
  
  
  .divul{
      background: 
          url(/CI_Gestion_incidencias/images/menuL.png) left no-repeat,
          url(/CI_Gestion_incidencias/images/menuR.png) right no-repeat;
      display: inline-block;
      padding-right: 29px;
      margin-left: -3px;
  }
  
  
  #cssmenu ul li
  {
      height: 30px;
      color: #FFF;
      list-style: none;
      display: inline;
      padding-right: 20px;
      padding-left: 10px;
      padding-top: 5px;
      padding-bottom: 4px;
      z-index: 1000;
  }
  
  /**
  
  
  
  
  **/
  
  /*#cssmenu li a {
      color: #666666;
      display: block;
      font-weight: bold;
      line-height: 30px;
      padding: 0px 25px;
      text-align: center;
      text-decoration: none;
  }
  
  */
  #cssmenu li:hover {
      background: #CCCCCC;
      color: #000;
      text-decoration: none;
  }
  
  
  #cssmenu li ul {
      background: #CCCCCC;
      display: none;
      height: 25px;
      filter: alpha(opacity=95);
      opacity: 0.95;
      position: absolute;
      z-index: 200;
  
      margin-left: 0px;
      margin-top: 2px;
      width: 100%;
  
  }
  
  
  
  
  #cssmenu li:hover &gt; ul {
    display: block;
  }
  
  #cssmenu li li {
      display: block;
      color: #000;
      display: inline;
     /*  float: none;
      padding: 0px;
      position: relative;*/
  }
  
  
  
      #cssmenu li li:active {
          display: block;
          color: #000;
          display: inline;
      }
  
  
  #cssmenu li ul a {
      color: #000;
      display: inline;
      font-size: 12px;
      font-weight: bold;
      text-align: left;
      text-decoration: none;
  }
  </code></pre>