title: how to make dropdown menu select the option you clicked on last time
body: <p>as I said in the title I am trying to make my dropdown menu select the last option i clicked on for example:<a href="https://www.youtube.com/user/PewDiePie/videos?view=0&amp;sort=dd&amp;flow=grid" rel="nofollow noreferrer">https://www.youtube.com/user/PewDiePie/videos?view=0&amp;sort=dd&amp;flow=grid</a>
  in some youtube channels if you select videos and click on SORT BY then choose any option then if you click on sort by again you will see the last option you clicked is selected</p>
  <p>(css is internal) this is my code:</p>
  <p>html:</p>
  <pre><code> &lt;div style=&quot;display: inline-block; text-align: right; width: 89%&quot;&gt;   &lt;div tabindex=&quot;0&quot; class=&quot;menu&quot;&gt;
  &lt;div class=&quot;menu-dropdown&quot;&gt;
      &lt;a href=&quot;mostpopular.html&quot;&gt;Most Popular&lt;/a&gt;
      &lt;a href=&quot;newest.html&quot;&gt;Newest&lt;/a&gt;
      &lt;a href=&quot;oldest.html&quot;&gt;Oldest&lt;/a&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>css:</p>
  <pre><code>&lt;style&gt;
  /* style for the css menu dropdown container */
  .menu {
  position:relative;
  display:inline-block;
  z-index:2; padding:0;
  margin:0;
  outline:0;
  text-align:left;
  }
  
  /* style for the button */
  .menu:before {
  content: &quot;\2630 \a0 Menu&quot;; 
  color:white;
  padding: 5px 10px;
  border: 1px solid #555;
  border-radius:3px;
  background: #96305e;
  background: -moz-linear-gradient(top,  #96305e 0%, #822956 10%, #822956 90%, #751749 100%);
  background: -webkit-linear-gradient(top,  #96305e 0%,#822956 10%,#822956 90%,#751749 100%);
  background: linear-gradient(to bottom,  #96305e 0%,#822956 10%,#822956 90%,#751749 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#96305e', 
  endColorstr='#751749',GradientType=0 );
  }
  
  .menu:focus { pointer-events:none; }
  
  /* If :focus detected the dropdown menu is displayed by making it visible */
  .menu:focus .menu-dropdown { opacity:1; visibility:visible; }
  
  /* style for the dropdown box */
  .menu-dropdown {
  background-color: #364656;
  width: auto;
  margin:3px 0 0 0;
  padding: 10px;
  border-radius:3px;
  border:1px black solid;
  border-radius:3px;
  pointer-events: auto;
  position: absolute;
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  transition: visibility 1s;
  background: #1f8bd3;
  background: -moz-linear-gradient(top,  #1f8bd3 0%, #1b7aba 10%, #1b7aba 90%, #1b61b7 100%);
  background: -webkit-linear-gradient(top,  #1f8bd3 0%,#1b7aba 10%,#1b7aba 90%,#1b61b7 100%);
  background: linear-gradient(to bottom,  #1f8bd3 0%,#1b7aba 10%,#1b7aba 90%,#1b61b7 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1f8bd3', 
  endColorstr='#1b61b7',GradientType=0 );
  }
  
  /* style the links in the dropdown */
  .menu-dropdown a {
  background:transparent;
  border:none;
  outline:0;
  display:block;
  color:white;
  text-decoration:none;
  width:160px;
  padding:5px;
  }
  &lt;/style&gt;
  </code></pre>
  <p><strong>EDIT</strong></p>
  <p>Full Html:</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset=&quot;utf-8&quot;&gt;
  &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
   &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;style.css&quot;&gt;
   &lt;/head&gt;
  
   &lt;div id=&quot;header&quot;&gt;
   &lt;div class=&quot;container&quot;&gt;
   &lt;a href=&quot;main lol.html&quot;&gt;Home&lt;/a&gt;
   &lt;ul id=&quot;header-nav&quot;&gt;
   &lt;li&gt;&lt;a href=&quot;about.html&quot; &gt;About&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href=&quot;contact.html&quot; &gt;Contact&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href=&quot;downloads.html&quot;&gt;Download Links&lt;/a&gt;&lt;/li&gt;
   &lt;/ul&gt;
   &lt;/div&gt;
   &lt;/div&gt;
   &lt;body&gt;
   &lt;div style=&quot;display: inline-block; text-align: right; width: 89%&quot;&gt;   
   &lt;div tabindex=&quot;0&quot; class=&quot;menu&quot;&gt;
   &lt;div class=&quot;menu-dropdown&quot;&gt;
   &lt;a href=&quot;mostpopular.html&quot; target=&quot;_blank&quot;&gt;Most Popular&lt;/a&gt;
   &lt;a href=&quot;newest.html&quot; target=&quot;_blank&quot;&gt;Newest&lt;/a&gt;
   &lt;a href=&quot;oldest.html&quot; target=&quot;_blank&quot;&gt;Oldest&lt;/a&gt;
   &lt;/div&gt;
   &lt;/div&gt;
   &lt;/div&gt;
   &lt;style&gt;
   /* style for the css menu dropdown container */
  .menu {
         position:relative;
         display:inline-block;
         z-index:2; padding:0;
         margin:0;
         outline:0;
         text-align:left;
      }
  
  /* style for the button */
  .menu:before {
  content: &quot;\2630 \a0 Menu&quot;; 
  color:white;
  padding: 5px 10px;
  border: 1px solid #555;
  border-radius:3px;
  background: #96305e;
  background: -moz-linear-gradient(top,  #96305e 0%, #822956 10%, #822956 
  90%, #751749 100%);
  background: -webkit-linear-gradient(top,  #96305e 0%,#822956 10%,#822956 
  90%,#751749 100%);
  background: linear-gradient(to bottom,  #96305e 0%,#822956 10%,#822956 
  90%,#751749 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( 
  startColorstr='#96305e', endColorstr='#751749',GradientType=0 );
  }
  
  .menu:focus { pointer-events:none; }
  
  /* If :focus detected the dropdown menu is displayed by making it visible 
   */
  .menu:focus .menu-dropdown { opacity:1; visibility:visible; }
  
  /* style for the dropdown box */
  .menu-dropdown {
  background-color: #364656;
  width: auto;
  margin:3px 0 0 0;
  padding: 10px;
  border-radius:3px;
  border:1px black solid;
  border-radius:3px;
  pointer-events: auto;
  position: absolute;
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  transition: visibility 1s;
  background: #1f8bd3;
  background: -moz-linear-gradient(top,  #1f8bd3 0%, #1b7aba 10%, #1b7aba 
   90%, #1b61b7 100%);
  background: -webkit-linear-gradient(top,  #1f8bd3 0%,#1b7aba 10%,#1b7aba 
  90%,#1b61b7 100%);
  background: linear-gradient(to bottom,  #1f8bd3 0%,#1b7aba 10%,#1b7aba 
  90%,#1b61b7 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( 
  startColorstr='#1f8bd3', endColorstr='#1b61b7',GradientType=0 );
  }
  
   /* style the links in the dropdown */
  .menu-dropdown a {
  background:transparent;
  border:none;
  outline:0;
  display:block;
  color:white;
  text-decoration:none;
  width:160px;
  padding:5px;
  }
  &lt;/style&gt;
  &lt;/body&gt;
  &lt;center&gt;
  &lt;h1&gt;Games&lt;/h1&gt;
  &lt;h3&gt;
  &lt;a href=&quot;https://direct-link.net/165397/script&quot;target=&quot;_blank&quot; &gt;Roblox 
  autorob script&lt;/a&gt;&lt;br&gt;
  &lt;a href=&quot;&quot;target=&quot;_blank&quot;&gt;8 ball pool hack no root&lt;/a&gt;&lt;br&gt;
  &lt;/h3&gt;
  &lt;/center&gt;
  &lt;div id=&quot;footer&quot;&gt;
  &lt;div class=&quot;container&quot;&gt;
  &lt;div class=&quot;column&quot;&gt;
  &lt;h4&gt;My Links&lt;/h4&gt;
  &lt;p&gt;
  &lt;a href=&quot;https://web.facebook.com/YousefRaedXD&quot; 
   target=&quot;_blank&quot;&gt;Facebook&lt;/a&gt;&lt;br&gt;
   &lt;a href=&quot;https://www.youtube.com/channel/UC6x7kvBibYzem6i59UMc3kw&quot; 
   target=&quot;_blank&quot;&gt;Youtube&lt;/a&gt;
   &lt;/p&gt;
   &lt;/div&gt;
   &lt;div class=&quot;column&quot;&gt;
   &lt;h4&gt;My Story&lt;/h4&gt;
   &lt;p&gt;Hi there! I study in middle school and i wish to be a web programmer 
   :3&lt;/p&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/html&gt;
  </code></pre>
  <p>Full css (external):</p>
  <pre><code>#header-nav li {
  display: inline;
  padding-left: 20px;
  }
  #header-nav {
  display: block;
  float:right;
  margin-top:0;
  }
  #header {
  background-color: #1abc9c;
  height: 150px;
  line-height: 150px;
  }
  container {
  max-width:1000px;
  margin:0 auto;
  }
  #header-title {
  display: block;
  float: left;
  font-size: 20px;
  font-weight: bold;
  }
  #header a {
  color: white;
  text-decoration: none;
  
  text-transform: uppercase;
  letter-spacing: 0.1em;
  }
  #header a:hover {
  color: #222;
  }
  #footer {
  background-color: #2f2f2f;
  padding: 50px 0;
  }
  .column {
  min-width: 300px
  display: inline-block;
  vertical-align: top;
  }
  #footer h4 {
  color: white;
  text-transform: uppercase;
  letter-spacing: 0.1em
  }
  #footer p {
  color:white;
  }
  a {
  color: #1abc9c;
  text-decoration: none;
  }
  a:hover {
  color: #F6A623;
  }
  .post {
  max-width: 800px;
  margin: 0 auto;
  padding: 60px 0;
  }
  .post-author img {
  width: 50px;
  height: 50px;
  vertical-align: middle;
  }
  .post-author span {
  margin-left: 16px;
  }
  .post-date {
  color: D2D2D2;
  font-size: 14px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  }
  h1, h2, h3, h4 {
  color: #333;
  }
  p {
  line-height: 1.5;
  }
  @import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);
  body {
  margin: 0;
  color: #555;
  
  font-family: 'Montserrat', sans-serif;
  }
  .post, .about {
  max-width: 800px;
  margin: 0 auto;
  padding: 60px 0;
  }
  </code></pre>