title: Clickable accordion menu with two fields
body: <p>I would love to get some help with my menu.
  I've added simple accordion menu to my site, but i need to do one trick. Menu has "Products" title text and arrow to show that product has more submenus.
  I would like to separate those fields: 
  - when i click on "Products" text it will take me to the linked page
  - when i click on rest of "Products" field menu will collapse showing subcategories.
  I cannot touch html file, can I do the magic in css or javascript file?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>( function( $ ) {
  $( document ).ready(function() {
  $('#cssmenu li.has-sub&gt;a').on('click', function(){
    $(this).removeAttr('href');
    var element = $(this).parent('li');
    if (element.hasClass('open')) {
     element.removeClass('open');
     element.find('li').removeClass('open');
     element.find('ul').slideUp();
    }
    else {
     element.addClass('open');
     element.children('ul').slideDown();
     element.siblings('li').children('ul').slideUp();
     element.siblings('li').removeClass('open');
     element.siblings('li').find('li').removeClass('open');
     element.siblings('li').find('ul').slideUp();
    }
   });
  
   $('#cssmenu&gt;ul&gt;li.has-sub&gt;a').append('&lt;span class="holder"&gt;&lt;/span&gt;');
  
   (function getColor() {
    var r, g, b;
    var textColor = $('#cssmenu').css('color');
    textColor = textColor.slice(4);
    r = textColor.slice(0, textColor.indexOf(','));
    textColor = textColor.slice(textColor.indexOf(' ') + 1);
    g = textColor.slice(0, textColor.indexOf(','));
    textColor = textColor.slice(textColor.indexOf(' ') + 1);
    b = textColor.slice(0, textColor.indexOf(')'));
    var l = rgbToHsl(r, g, b);
    if (l &gt; 0.7) {
     $('#cssmenu&gt;ul&gt;li&gt;a').css('text-shadow', '0 1px 1px rgba(0, 0, 0, .35)');
     $('#cssmenu&gt;ul&gt;li&gt;a&gt;span').css('border-color', 'rgba(0, 0, 0, .35)');
    }
    else
    {
     $('#cssmenu&gt;ul&gt;li&gt;a').css('text-shadow', '0 1px 0 rgba(255, 255, 255, .35)');
     $('#cssmenu&gt;ul&gt;li&gt;a&gt;span').css('border-color', 'rgba(255, 255, 255, .35)');
    }
   })();
  
   function rgbToHsl(r, g, b) {
       r /= 255, g /= 255, b /= 255;
       var max = Math.max(r, g, b), min = Math.min(r, g, b);
       var h, s, l = (max + min) / 2;
  
       if(max == min){
           h = s = 0;
       }
       else {
           var d = max - min;
           s = l &gt; 0.5 ? d / (2 - max - min) : d / (max + min);
           switch(max){
               case r: h = (g - b) / d + (g &lt; b ? 6 : 0); break;
               case g: h = (b - r) / d + 2; break;
               case b: h = (r - g) / d + 4; break;
           }
           h /= 6;
       }
       return l;
   }
  });
  } )( jQuery );</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#cssmenu,
  #cssmenu ul,
  #cssmenu ul li,
  #cssmenu ul li a {
    margin: 0;
    padding: 0;
    border: 0;
    list-style: none;
    line-height: 1;
    display: block;
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  #cssmenu {
    width: 200px;
    font-family: Helvetica, Arial, sans-serif;
    color: #ffffff;
  }
  #cssmenu ul ul {
    display: none;
  }
  .align-right {
    float: right;
  }
  #cssmenu &gt; ul &gt; li &gt; a {
    padding: 15px 20px;
    border-left: 1px solid #1682ba;
    border-right: 1px solid #1682ba;
    border-top: 1px solid #1682ba;
    cursor: pointer;
    z-index: 2;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    color: #ffffff;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
    background: #36aae7;
    background: -webkit-linear-gradient(#36aae7, #1fa0e4);
    background: -moz-linear-gradient(#36aae7, #1fa0e4);
    background: -o-linear-gradient(#36aae7, #1fa0e4);
    background: -ms-linear-gradient(#36aae7, #1fa0e4);
    background: linear-gradient(#36aae7, #1fa0e4);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
  }
  #cssmenu &gt; ul &gt; li &gt; a:hover,
  #cssmenu &gt; ul &gt; li.active &gt; a,
  #cssmenu &gt; ul &gt; li.open &gt; a {
    color: #eeeeee;
    background: #1fa0e4;
    background: -webkit-linear-gradient(#1fa0e4, #1992d1);
    background: -moz-linear-gradient(#1fa0e4, #1992d1);
    background: -o-linear-gradient(#1fa0e4, #1992d1);
    background: -ms-linear-gradient(#1fa0e4, #1992d1);
    background: linear-gradient(#1fa0e4, #1992d1);
  }
  #cssmenu &gt; ul &gt; li.open &gt; a {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.15);
    border-bottom: 1px solid #1682ba;
  }
  #cssmenu &gt; ul &gt; li:last-child &gt; a,
  #cssmenu &gt; ul &gt; li.last &gt; a {
    border-bottom: 1px solid #1682ba;
  }
  .holder {
    width: 0;
    height: 0;
    position: absolute;
    top: 0;
    right: 0;
  }
  .holder::after,
  .holder::before {
    display: block;
    position: absolute;
    content: "";
    width: 6px;
    height: 6px;
    right: 20px;
    z-index: 10;
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    transform: rotate(-135deg);
  }
  .holder::after {
    top: 17px;
    border-top: 2px solid #ffffff;
    border-left: 2px solid #ffffff;
  }
  #cssmenu &gt; ul &gt; li &gt; a:hover &gt; span::after,
  #cssmenu &gt; ul &gt; li.active &gt; a &gt; span::after,
  #cssmenu &gt; ul &gt; li.open &gt; a &gt; span::after {
    border-color: #eeeeee;
  }
  .holder::before {
    top: 18px;
    border-top: 2px solid;
    border-left: 2px solid;
    border-top-color: inherit;
    border-left-color: inherit;
  }
  #cssmenu ul ul li a {
    cursor: pointer;
    border-bottom: 1px solid #32373e;
    border-left: 1px solid #32373e;
    border-right: 1px solid #32373e;
    padding: 10px 20px;
    z-index: 1;
    text-decoration: none;
    font-size: 13px;
    color: #eeeeee;
    background: #49505a;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }
  #cssmenu ul ul li:hover &gt; a,
  #cssmenu ul ul li.open &gt; a,
  #cssmenu ul ul li.active &gt; a {
    background: #424852;
    color: #ffffff;
  }
  #cssmenu ul ul li:first-child &gt; a {
    box-shadow: none;
  }
  #cssmenu ul ul ul li:first-child &gt; a {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }
  #cssmenu ul ul ul li a {
    padding-left: 30px;
  }
  #cssmenu &gt; ul &gt; li &gt; ul &gt; li:last-child &gt; a,
  #cssmenu &gt; ul &gt; li &gt; ul &gt; li.last &gt; a {
    border-bottom: 0;
  }
  #cssmenu &gt; ul &gt; li &gt; ul &gt; li.open:last-child &gt; a,
  #cssmenu &gt; ul &gt; li &gt; ul &gt; li.last.open &gt; a {
    border-bottom: 1px solid #32373e;
  }
  #cssmenu &gt; ul &gt; li &gt; ul &gt; li.open:last-child &gt; ul &gt; li:last-child &gt; a {
    border-bottom: 0;
  }
  #cssmenu ul ul li.has-sub &gt; a::after {
    display: block;
    position: absolute;
    content: "";
    width: 5px;
    height: 5px;
    right: 20px;
    z-index: 10;
    top: 11.5px;
    border-top: 2px solid #eeeeee;
    border-left: 2px solid #eeeeee;
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    transform: rotate(-135deg);
  }
  #cssmenu ul ul li.active &gt; a::after,
  #cssmenu ul ul li.open &gt; a::after,
  #cssmenu ul ul li &gt; a:hover::after {
    border-color: #ffffff;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;div id='cssmenu'&gt;
  &lt;ul&gt;
     &lt;li&gt;&lt;a href='#'&gt;&lt;span&gt;Home&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
     &lt;li class='active has-sub'&gt;&lt;a href='www.IwantToMove.com'&gt;&lt;span&gt;Products&lt;/span&gt;&lt;/a&gt;
        &lt;ul&gt;
           &lt;li class='has-sub'&gt;&lt;a href='#'&gt;&lt;span&gt;Product 1&lt;/span&gt;&lt;/a&gt;
              &lt;ul&gt;
                 &lt;li&gt;&lt;a href='#'&gt;&lt;span&gt;Sub Product&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                 &lt;li class='last'&gt;&lt;a href='#'&gt;&lt;span&gt;Sub Product&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
           &lt;/li&gt;
           &lt;li class='has-sub'&gt;&lt;a href='#'&gt;&lt;span&gt;Product 2&lt;/span&gt;&lt;/a&gt;
              &lt;ul&gt;
                 &lt;li&gt;&lt;a href='#'&gt;&lt;span&gt;Sub Product&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                 &lt;li class='last'&gt;&lt;a href='#'&gt;&lt;span&gt;Sub Product&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
           &lt;/li&gt;
        &lt;/ul&gt;
     &lt;/li&gt;
     &lt;li&gt;&lt;a href='#'&gt;&lt;span&gt;About&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
     &lt;li class='last'&gt;&lt;a href='#'&gt;&lt;span&gt;Contact&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="http://jsfiddle.net/wxv7oao3/1/" rel="nofollow">http://jsfiddle.net/wxv7oao3/1/</a></p>