title: Removing Focus from a link, once clicked in CSS drop down menu
body: <p>I have a css drop down menu (below), however, my problem is this, once a drop menu option (link) is clicked, nasty ie. 7 leaves an unwated rectangular fine dotted line focus that appears long after a menu option is clicked. How can I remove the focus of the link after it has been clicked?</p>
  
  <pre><code>    &lt;div id="menu" style="width: 1001px; height: 20px"&gt;
      &lt;ul&gt;
      &lt;li&gt;&lt;a href="#nogo"&gt;&lt;div id="file"&gt;File&lt;/div&gt;&lt;/a&gt;
      &lt;ul&gt;
      &lt;li&gt;&lt;a href="#nogo" onclick="window.print()"&gt;&lt;div id="print"&gt;Print&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#nogo" onclick="sims_update()"&gt;&lt;div id="save"&gt;Save&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#nogo" onclick="sims_update('s');window.close()"&gt;&lt;div id="saveandexit"&gt;Save &amp; Exit&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#nogo" onclick="window.close()"&gt;&lt;div id="exit"&gt;Exit&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#nogo"&gt;&lt;div id="edit"&gt;Edit&lt;/div&gt;&lt;/a&gt;
      &lt;ul&gt;
      &lt;li&gt;&lt;a href="#nogo" onclick="sims_addnew();return false"&gt;&lt;div id="addnew"&gt;Add new&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#nogo"&gt;&lt;div id="delete"&gt;Delete&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#nogo" onclick="sims_reset()"&gt;&lt;div id="clear"&gt;Clear Form&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#nogo"&gt;&lt;div id="view"&gt;View&lt;/div&gt;&lt;/a&gt;
      &lt;ul&gt;
      &lt;li&gt;&lt;a href="#nogo"&gt;&lt;div id="goto_first"&gt;&amp;gt;&amp;gt; Go to First&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#nogo"&gt;&lt;div id="goto_next"&gt;&amp;gt;Go to Next&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#nogo"&gt;&lt;div id="goto_prev"&gt;Go to Previous&amp;gt;&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#nogo"&gt;&lt;div id="goto_last"&gt;Go to Last&amp;gt;&amp;gt;&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;/li&gt;
  
      &lt;li&gt;&lt;a href="#nogo"&gt;&lt;div id="reports"&gt;Reports&lt;/div&gt;&lt;/a&gt;
      &lt;ul&gt;
      &lt;li&gt;&lt;a href="#nogo"&gt;&lt;div id="export_excel"&gt;Export to Excel Table&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#nogo"&gt;&lt;div id="export_html"&gt;Export to HTML Table&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#nogo" onclick="sims_compile_htmllist()"&gt;&lt;div id="export_list"&gt;Export to HTML List&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;/li&gt;
  
      &lt;li&gt;&lt;a href="#nogo"&gt;&lt;div id="logoff"&gt;Logoff&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
  
      &lt;/ul&gt;
      &lt;ul&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>The CSS:</p>
  
  <pre><code>/*HORIZONTAL DROP-DOWN MENU */
  #menuwrapper{
      position: fixed;
      top: 30px;
      left: 0px;
  
      background-color: #A9BBD3;
      height: 19px;
      color: #FFFFFF;
      font-size: 8pt;
      padding-top: 1px;
      padding-left: 3px;
      border-top: 1px solid #FFF;
      width: 100%;
  
  }
  
  
  #menu{
      padding:0;
      margin:0;
      position: fixed;
      top: 31px;
      left: 0px;
      font-size: 8pt;
      width: 1001px;
  }
  #menu ul{
      padding:0;
      margin:0;
  }
  #menu li{
      position: relative;
      list-style: none;
      margin: 0;
      padding:0;
      float: left;
      display:inline;
  
  } 
  
  #menu li a{
      width:125px;
      height: 20px;
      display: block;
      text-decoration:none;
      line-height: 20px;
      background-color: #A9BBD3;
      color: #FFF;
  } 
  
  #menu li a:hover{
      background-color: #446087;
  } 
  #menu ul ul {
      position: absolute;
      top: 21px;
      visibility: hidden;
  }
  
  #menu ul ul li a {
      width: 120px;
      padding-left: 5px;
      filter:alpha(opacity=85);
  }
  #menu ul li:hover ul{
      visibility:visible;
  }
  #menu &gt; ul &gt; li &gt; a {
      text-align:center;
  }
  #menu &gt; ul &gt; li &gt; a:hover {
      border-bottom: 1px solid #FFF;
  }
  </code></pre>