title: Keep current menu item highlighted
body: <p>I have a menu setup on my page that loads items into an iframe. They are custom maps that replace the default Google map. My question is how do I get the menu item for the currently displaying item to remain highlighted?</p>
  
  <pre><code>&lt;div id="right_col" class="clearfix"&gt;
  
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="copperwood.html" target="iframe_map"&gt;Copperwood&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="canyoncrest.html" target="iframe_map"&gt;Canyon Crest/The Canyons&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="riverstone.html" target="iframe_map"&gt;Riverstone&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="garrystation.html" target="iframe_map"&gt;Garry Station&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="legacyridge.html" target="iframe_map"&gt;Legacy Ridge&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="https://maps.google.com/maps/ms?msa=0&amp;amp;msid=217268423195093625679.0004cf68eb14897eb07b4&amp;amp;ie=UTF8&amp;amp;ll=49.69371,-112.868754&amp;amp;spn=0.086835,0.089951&amp;amp;t=m&amp;amp;output=embed" target="iframe_map"&gt;Overall Lethbridge&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
  
          &lt;/div&gt;
  </code></pre>
  
  <p>My CSS:</p>
  
  <pre><code>#right_col ul{
  position: relative;
  list-style: none;
  top: -17px;
  }
  
  #right_col ul a{
  text-decoration: none;
  color: #000000;
  display: block;
  padding:10px 10px 10px 15px;
  margin: 10px;
  background: #eeeeee;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px; /* future proofing */
  -khtml-border-radius: 10px; /* for old Konqueror browsers */
  }
  
  #right_col ul a:hover{
  background: #e9b900;
  text-decoration: none;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px; /* future proofing */
  -khtml-border-radius: 10px; /* for old Konqueror browsers */
  }
  </code></pre>