index.html

<!DOCTYPE html>
<html>
  <head>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
    <script src="jquery.contextmenu.js"></script>
    <link rel="stylesheet" href="jquery.contextmenu.css">
    <link rel="stylesheet" href="localstyle.css">
  </head>
  <body>
    <script type="text/javascript">

    /*
    var itemIndex = 3; // which item (starting at 0)
    $('.contextMenuPlugin > li:not(:nth-child(2))').get(itemIndex).css({backgroundColor: 'blue'})*/

    $(document).ready(function() {
      $('#conf').hide();
      $('#auth').hide();
      $('#outer').click(function(){
        $('#conf').fadeOut("slow");
      });
      $('#outer').click(function(){
        $('#auth').fadeOut("slow");
      });
      $('#red').click(function(){
        $('.contextMenuPlugin').css({'background-color': 'white'});
      });

      $('#outer').contextPopup({
        title: 'LETTERS',
        items: [
          {label:'A',     action:function() { alert('clicked A') } },
          {label:'B',     action:function() { alert('clicked B') } },
          {label:'COLOR', action:function() { $('#conf').fadeIn("slow"); } },
          // null, // divider
        ]
      });
    });
    </script>
      <div id="outer">
        outer context menu
        <div id="conf">
          <div id="red">R</div>
        </div>
      </div>
  </body>
</html>