title: href attribute conflicting with my css hover rule
body: <p>How can I get EXAMPLE TWO to work like EXAMPLE ONE. Whenever I add an a href tag it completely breaks my css hover rule to turn the color red. Help.</p>
  
  <pre><code>&lt;!-- EXAMPLE ONE --&gt;
  &lt;a href="#"&gt;&lt;div class="nav-portfolio"&gt;
      &lt;div class="navstyle"&gt;portfolio&lt;/div&gt;
              &lt;div id="project-numbox"&gt;1&lt;/div&gt;
               &lt;div id="project-numbox"&gt;2&lt;/div&gt;
               &lt;div id="project-numbox"&gt;3&lt;/div&gt;
  &lt;/div&gt;&lt;/a&gt;
  
  &lt;!-- EXAMPLE TWO --&gt;
  &lt;div class="navigation-container"&gt;
  &lt;a href="#"&gt;&lt;div class="nav-portfolio"&gt;
      &lt;div class="navstyle"&gt;portfolio&lt;/div&gt;
      &lt;a id="test" href="#"&gt;&lt;div id="project-numbox"&gt;1&lt;/div&gt;&lt;/a&gt;
  &lt;a href="#"&gt;&lt;div id="project-numbox"&gt;2&lt;/div&gt;&lt;/a&gt;
  &lt;a href="#"&gt;&lt;div id="project-numbox"&gt;3&lt;/div&gt;&lt;/a&gt;
  &lt;/div&gt;&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>edit: css in jsfiddle link</p>
  
  <p><strong>jsfiddle link: <a href="http://jsfiddle.net/jZWF7/1/" rel="nofollow">http://jsfiddle.net/jZWF7/1/</a></strong></p>