title: Collapse or hide CSS dropdown menu when a menu item is clicked
body: <p>I have a CSS dropdown menu that seems to be working fine except one thing, which is to collapse the dropdown menu items every time any of the links inside submenu is clicked. So when a user click a link in the in the submenu they are able to view the content in a  that I have in the same the page using JQuery.</p>
  
  <p>I have seen different questions regarding how to collapse dropdown menus onClick but they do not appear to help in my case.</p>
  
  <p>Here is my sample html and CSS, I hope someone can help me correct this issue.
  Initially I had to struggle to load the content into the </p>
  
  <pre class="lang-html prettyprint-override"><code>    &lt;!DOCTYPE html&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
          &lt;head&gt;
  
                  &lt;link rel="stylesheet" type="text/css" href="css_dropdown.css" /&gt;
                  &lt;script src="http://code.jquery.com/jquery-1.10.1.min.js"&gt;&lt;/script&gt;
                  &lt;script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"&gt;&lt;/script&gt;
                  &lt;script type="text/javascript" src="jquery.js"&gt;&lt;/script&gt;
                  &lt;title&gt;CSS Dropdown menu with load content in DIV element&lt;/title&gt;
          &lt;/head&gt;
          &lt;body&gt;
                  &lt;ul class="sectiontitle"&gt;
                          &lt;li&gt;Documents &lt;ul class="section"&gt;
                                          &lt;li&gt;&lt;a href="./docs/test1.html"&gt;Document 1&lt;/a&gt;&lt;/li&gt;
                                          &lt;li&gt;&lt;a href="./docs/test2.html"&gt;Document 2&lt;/a&gt;&lt;/li&gt;
                                          &lt;li&gt;&lt;a href="./docs/test3.html"&gt;Document 3&lt;/a&gt;&lt;/li&gt;
                                  &lt;/ul&gt;&lt;/li&gt;
                          &lt;li&gt;Items &lt;ul class="section"&gt;
                                          &lt;li&gt;&lt;a href="./items/test1.html"&gt;Item 1&lt;/a&gt;&lt;/li&gt;
                                          &lt;li&gt;&lt;a href="./items/test2.html"&gt;Item 2&lt;/a&gt;&lt;/li&gt;
                                          &lt;li&gt;&lt;a href="./items/test3.html"&gt;Item 3&lt;/a&gt;&lt;/li&gt;
                                  &lt;/ul&gt;&lt;/li&gt;
                          &lt;li&gt;Products &lt;ul class="section"&gt;
                                          &lt;li&gt;&lt;a href="./prods/test1.html"&gt;Product 1&lt;/a&gt;&lt;/li&gt;
                                          &lt;li&gt;&lt;a href="./prods/test2.html"&gt;Product 2&lt;/a&gt;&lt;/li&gt;
                                          &lt;li&gt;&lt;a href="./prods/test3.html"&gt;Product 3&lt;/a&gt;&lt;/li&gt;
                                  &lt;/ul&gt;&lt;/li&gt;
                  &lt;/ul&gt;
                  &lt;div class="container"&gt;
                          &lt;!-- This is an empty container for loading linked content allowing to stay on the same page as the dropdown list --&gt;
                  &lt;/div&gt;
                  &lt;!--This script needs to be loaded last for the browser to accept to make it work.--&gt;
                  &lt;script type="text/javascript"&gt;
  
  $(".section").on("click", "a", function(e){
      e.preventDefault();
      $(".container").load( $(this).prop("href") );
  
        // Stop regular handling of "click" in IE (and some others)
      return false;
  }); 
  &lt;/script&gt;
          &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>and here is the CSS</p>
  
  <pre class="lang-css prettyprint-override"><code>    body, .title.topictitle2 {
      width:auto;
      margin-top:0;
      margin-left:.8em;
      font-family:"news cycle", helvetica, sans-serif;
      font-size: .95em;
      height:auto;
  
   }
  #container {
  
      position:fixed;
      top:2.25em;
      text-transform:capitalize;
      background: #c65;
      width: 100%;
      /*overflow:inherit;*/
      z-index: 1;
  }
  
  .sectiontitle{
  
      margin:0;
      padding:0 1em;
      background:#194879;
      height:2.25em;
      list-style:none;
  
      z-index: 2;
  
    /*  position:fixed;*/
  }
  
  .sectiontitle &gt; li{ /* We target only the list element inside ul.sectiontitle class*/
  
      float:left;
      height:100%;
      margin-right:0; /*To control how far apart from the right each &lt;li&gt; should be positioned from the other*/
      padding:0 .02em;
  }
  
  .sectiontitle &gt; li{
  
      float:left;
      height:100%;
      color:white;
      font-family:"news cycle", helvetica, sans-serif;
      font-size:.9em;
      text-decoration:none;
      line-height:2;
      text-transform:capitalize;
      /* border-right: solid white .03em;*/
  }
  
  ul.sectiontitle li:hover{
      color:orange;
      border-bottom:.1em dotted #224480;
      /*  text-decoration:underline; */
  }
  
  /* Contextual positioning for the children under the .sectiontitle list items*/
  
  ul.section{
  
      position:relative;
      left:-1.12em;
  
      z-index: 3;
  }
  
  ul.section{
  
      /*  width:10em;*/
      margin:0 0 0;
      padding:0 0 0;
      list-style:none;
      background:repeat scroll 0% 0% rgb(15, 161, 224);
      position:relative; /*Very important to keep the children ul.section aligned with its parent ul.sectiontitle*/
      top:-1000em;
  
  }
  
  ul.section{
      width:auto; /* dropdown list width better when set to auto*/
      margin:0 auto 0.3em auto;
      white-space:inherit;
      border: solid #224480 0.01em;
  }
  
  ul.section li a{
  
      height:100%;
      display:block;
      padding:0.3em 1em 0;  /*Set padding around the text in the list items under ul.section elements*/
      color:#fff;
      /*font-weight:bold;*/
      text-decoration:none;
  
      }
  
  ul.section li a:hover{
      background:#69F;
      /*text-decoration:underline;*/
  }
  
  /* This controls the position of the child ul.section from the top horizontal bar*/
  .sectiontitle &gt; li:hover ul.section{
      top:.47em;
  }
  
  .container p:last-child:focus {
      background: #399;
  }
  </code></pre>