title: How to hide currently selected li item from being an option when user clicks dropdown again?
body: <p>So let's say user opens menu and chooses #4. When he opens the menu again while #4 is selected, the menu would ideally hide that #4 option (because it seems redundant to have the option still there). How can this be achieved in the code?</p>
  
  <p><a href="http://jsfiddle.net/j8oawqL4/" rel="nofollow">http://jsfiddle.net/j8oawqL4/</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;ul class="navbar cf"&gt;
                      &lt;li&gt;
                          &lt;a href="#" class="ActiveListItem"&gt;Category&lt;/a&gt;
                          &lt;ul&gt;
                              &lt;li&gt;&lt;a href="#"&gt;1&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;2&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;3&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;4&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;5&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;6&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;7&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>ul.navbar {
  
    border-style:solid;
    border-width:1px; 
    border-color:#739FE0;
    width: 100px;                /*Widthchanger1*/
    border-radius: 4px;
    margin-left:0px;
    margin-right:0px;
    font-size:14px;
    height:33px;
  
  
  
  }
  
  
  ul.navbar li a.ActiveListItem {
      background:url(../images/downarrowblue.png) !important; 
      background-repeat: no-repeat !important;
      background-size: 10px 10px !important;
      background-position: 83px 13px !important;
      color:white; !important;
      background-color:#222 !important;
      padding:7.5px 0px !important; 
      font-weight:normal !important;
      margin-left:0px;         /*Widthchanger2, got the activeitem centered with list text this way*/
      margin-right:0px;
      border-radius: 4px;
      height:18px;
      width:100px;   /*kinda messes with width of text*/
       margin-bottom:1px;
  
  }
  
  ul.navbar li {
  
      position: relative;
      width:100px;                        /*Changes width of actual list*/
  }
  
  ul.navbar li a {
      display: block;
      color: white;
      padding:10px 5px;
      text-decoration:none;
      transition: all .1s ease-in;
  
  }
  
  ul.navbar li a:hover,
  ul.navbar li:hover &gt; a {
      /*background:black; */
      background:#739FE0;
      color:#FFFFFF;
      /*font-weight:600;*/
      /*border-bottom-color:#FFFFFF;
      border-bottom-style:solid;*/
      /*border-color:#FFFFFF;
      border-style:solid;
      border-width:1px; */
  
  }
  
      ul.navbar li ul {
          margin-top: 0px;               /*Controls space from listdropdown to listchooser*/
          position: absolute;
          background: #222;
          font-size: 14px;
          /* min-width: 200px; */
          display: none;
          z-index: 99;
          box-shadow: inset 0 0px 3px rgba(0,0,0,.6),
          0 5px 10px rgba(0,0,0,.6);
      }
  
  ol, ul { list-style: outside none none; }
  
  .hidden { display: none; }
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>$(function() {
  
  
  
  
    $('.navbar ul li a').click(function(){  
      $('.navbar &gt; li:first-child &gt; a').text($(this).text());
      $('.navbar &gt; li &gt; ul').addClass('hidden');
      $('.navbar li ul').slideToggle(100);
    });
    $('.navbar &gt; li').mouseenter(function(){
      $(this).find('ul').removeClass('hidden');
    });
    $('.ActiveListItem').click(function(){        
      $('.navbar li ul').slideToggle(300);
    });    
  });
  </code></pre>