title: How to avoiding page scrolling on href="#"?
body: <p>i am using one code for drop down menu</p>
  
  <pre><code>&lt;dl id="sample" class="dropdown"&gt;
          &lt;dt&gt;&lt;a href="#"&gt;&lt;span&gt;Please select the country&lt;/span&gt;&lt;/a&gt;&lt;/dt&gt;
          &lt;dd&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Brazil&lt;img class="flag" src="br.png" alt="" /&gt;&lt;span class="value"&gt;BR&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;France&lt;img class="flag" src="fr.png" alt="" /&gt;&lt;span class="value"&gt;FR&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Germany&lt;img class="flag" src="de.png" alt="" /&gt;&lt;span class="value"&gt;DE&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;India&lt;img class="flag" src="in.png" alt="" /&gt;&lt;span class="value"&gt;IN&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Japan&lt;img class="flag" src="jp.png" alt="" /&gt;&lt;span class="value"&gt;JP&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Serbia&lt;img class="flag" src="cs.png" alt="" /&gt;&lt;span class="value"&gt;CS&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;United Kingdom&lt;img class="flag" src="gb.png" alt="" /&gt;&lt;span class="value"&gt;UK&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;United States&lt;img class="flag" src="us.png" alt="" /&gt;&lt;span class="value"&gt;US&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/dd&gt;
      &lt;/dl&gt;
  </code></pre>
  
  <p>this works fine.</p>
  
  <p>but the problem i am facing, 
  i am using this menu on bottom of page and when i click its shows the behavior "#"
  and page scroll to top.</p>
  
  <p>how to avoid this</p>
  
  <p>Thanks</p>