Can't create separate hover div tags

Question

Basically, in my website, I have a nav bar with border-radius: 20px; added, whereas the hover looks don't- so on the first tab (Home) when I hover over it, I lose the roundness. To fix this, I made two things:
-css element
-and then the HTML bit
I placed the new element called "home" inside the navigation <div>. It looks like this:
                    <div id="navigation">
                           <div id="home">                                
                                    <ul>
                                      <li>
                                        <a href="../home.html.html">Home</a>
                                      </li>
                                    </ul>
                              </div>                                                                        
                            <ul>                                                                                                  
                                <li><a href="../about.html.html">About</a></li>                     <!--All of the left is for the Nav-Bar -->
                                <li><a href="../tutorials.html">Tutorials</a></li>
                                <li><a href="../contact me.html">Contact me</a></li>                       
                            </ul>                                       
                     </div>
And this, in design view, shows the menu exactly as before, except for code-wise the home button is separate. So I thought, to the CSS of it, just add border-radius. I did this and nothing. I then figured out that all the buttons were still linked to <a> so I thought, make <a2> in the css, with the same properties as a, but with border radius:
                           <div id="home">                                
                                    <ul>
                                      <li>
                                        <a2 href="../home.html.html">Home</a2>
                                      </li>
                                    </ul>
                            </div>
And this is where the problems start. as soon as I do this, the Home button loses the looks of the other buttons and hovers above, but it does have the desired rounding effect.
Please help, I am very confused and am new to this

Answer 1

Right, so now I've changed the HTML to this:
                           <div id="home">                                
                                    <ul>
                                      <li>
                                        <a id="home_hover" href="../home.html.html">Home</a>
                                      </li>
                                    </ul>
                            </div> 
And the CSS to this:
#home_hover
  background: #383;
  border-radius: 20px;
This does work, but my Home button is constantly "hovered over" with rounded edges. So how would I get it so that it only does this when hovering?
Thanks for your help