title: display a div after click
body: <p>I have a problem with one script. I believe it's something simple, unfortunately not that simple for me. 
  What I'm trying to do is to display a div (appearing after click). It should happen when you click on "Products". What I have so far is this:</p>
  
  <pre><code>   &lt;div id="header"&gt;
  
      &lt;div id="headcont"&gt; 
  
              &lt;div id="main-menu"&gt;
                  &lt;a href="#" id="button-products"&gt;Products&lt;/a&gt;
              &lt;/div&gt;
  
              &lt;div id="products-menu"&gt;
                  &lt;a href="#"&gt;Jackleg units&lt;/a&gt;
                  &lt;a href="#"&gt;Antivandal units&lt;/a&gt;
                  &lt;a href="#"&gt;Storage containers&lt;/a&gt;
              &lt;/div&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and css: </p>
  
  <pre><code>    body{
  
      background-color:#666;
  
  }
  
  #header{
      position:absolute;
      top:0px;
      background-color: rgba(0, 0, 0, .9);
      width:100%;
      height:70px;
      border-bottom:1px #999 solid;
      padding:15px 0;
      z-index:200;
  }
  
  #headcont{
      overflow:hidden;
      width: 480px;
      margin: 0 auto;
  }
  
  #main-menu{
      margin-top:55px;
      float:right;
  }
  
  #main-menu a{
      display:block;
      width: auto;
      font-size:1.7em;
      float:left;
      margin: 0 10px;
      color:#eee;
  }
  
  #products-menu{
      overflow:hidden;
      background-color: rgba(255, 255, 255, .8);
      width:980px;
      display: none;
  }
  
  #products-menu a{
      display:block;
      width: auto;
      background-color:rgba(0, 0, 0, .6);
      padding: 5px;
      margin: 2px 5px 2px 0;
      text-decoration:none;
      font-size:1.7em;
      float:left;
      color:#eee;
  }
  </code></pre>
  
  <ul>
  <li><p>the major thing - jquery:</p>
  
  <pre><code>$(function() {
      $('#button-products').on('click', function() {
          $('#products-menu').css("display:","block");
      });
  });
  </code></pre></li>
  </ul>
  
  <p>It's a bit long, so I used jsfiddle to help you understand what I'm trying to do: <a href="http://jsfiddle.net/tucado/7tbsR/3/" rel="nofollow">JSFIDDLE</a>. 
  Thank you very much for your help.</p>