Include External Html - Spacing Problem - HTML & CSS

Hi...

I have a little problem with my web page. I was trying to do a hover menu - need to say - successfully. But, fact is, that it works only as static html code in INDEX. Problem is, that when I put the hover menu in external .html file and include it to div .. It simply creates spacing on page.. I spent 4 hours trying to fix it and need to say, I'm starting to think, that I'm very dumb girl..

Now the codes..

code for include external .html file

<div id="menu"><? include "menus.html"; ?></div>

external .html file

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<ul>
    <li><a href="#">Úvod</a></li>
    <li><a href="#">Historie</a>
      <ul>
        <li><a href="#">Subpoložka 1</a></li>
        <li><a href="#">Subpoložka 2</a></li>
        <li><a href="#">Subpoložka 3</a></li>
      </ul>
    </li>
    <li><a href="#">Rasa</a>
      <ul>
        <li><a href="#">Subpoložka 1</a></li>
        <li><a href="#">Subpoložka 2</a></li>
        <li><a href="#">Subpoložka 3</a></li>
        <li><a href="#">Subpoložka 4</a></li>
        <li><a href="#">Subpoložka 5</a></li>
        <li><a href="#">Subpoložka 6</a></li>
      </ul>
    </li>
    <li><a href="#">Správa rasy</a>	
      <ul>
        <li><a href="#">Subpoložka 1</a></li>
        <li><a href="#">Subpoložka 2</a></li>
        <li><a href="#">Subpoložka 3</a></li>
        <li><a href="#">Subpoložka 4</a></li>
      </ul>
      </li>
    <li><a href="#">Síň slávy</a>	
      <ul>
        <li><a href="#">Subpoložka 1</a></li>
        <li><a href="#">Subpoložka 2</a></li>
      </ul>
      </li>
    <li><a href="#">Armáda</a>
      <ul>
        <li><a href="#">Subpoložka 1</a></li>
        <li><a href="#">Subpoložka 2</a></li>
        <li><a href="#">Subpoložka 3</a></li>
        <li><a href="#">Subpoložka 4</a></li>
      </ul>  
      </li>  
    <li><a href="#">Budovy</a>
          <ul>
        <li><a href="#">Subpoložka 1</a></li>
        <li><a href="#">Subpoložka 2</a></li>
        <li><a href="#">Subpoložka 3</a></li>
        <li><a href="#">Subpoložka 4</a></li>
      </ul>
      </li>
    <li><a href="#">Technologie</a>	
          <ul>
        <li><a href="#">Subpoložka 1</a></li>
        <li><a href="#">Subpoložka 2</a></li>
        <li><a href="#">Subpoložka 3</a></li>
        <li><a href="#">Subpoložka 4</a></li>
      </ul>
      </li>
    <li><a href="#">Ostatní</a>	
          <ul>
        <li><a href="#">Subpoložka 1</a></li>
        <li><a href="#">Subpoložka 2</a></li>
        <li><a href="#">Subpoložka 3</a></li>
        <li><a href="#">Subpoložka 4</a></li>
      </ul>
      </li>
    <li><a href="#">Pomůcky</a>
          <ul>
        <li><a href="#">Subpoložka 1</a></li>
        <li><a href="#">Subpoložka 2</a></li>
        <li><a href="#">Subpoložka 3</a></li>
        <li><a href="#">Subpoložka 4</a></li>
      </ul>
      </li>
    <li><a href="#">Nováčci</a>
          <ul>
        <li><a href="#">Subpoložka 1</a></li>
        <li><a href="#">Subpoložka 2</a></li>
        <li><a href="#">Subpoložka 3</a></li>
        <li><a href="#">Subpoložka 4</a></li>
      </ul>
      </li>
    <li><a href="#">Příběh</a>	
          <ul>
        <li><a href="#">Subpoložka 1</a></li>
        <li><a href="#">Subpoložka 2</a></li>
        <li><a href="#">Subpoložka 3</a></li>
        <li><a href="#">Subpoložka 4</a></li>
      </ul>
      </li>
  </ul>
</html>

and for last, css styling for that hover menu ..

#menu {height:30px; background-color:#FF0; margin: 0 auto; padding:0;}
#menu ul {margin:0; padding: 0; list-style:none;}
#menu li {float:left; list-style:none; margin:0; padding: 0; background-image:url(design/tlacitko.jpg);}
#menu li a {display:block; height:30px;width: 80px;line-height:30px; font-size:70%; color:#FF0; text-align:center; text-decoration:none; font-weight:bold;}
#menu li a:hover {color:#ffffff; background-image:url(design/hover.png);}
#menu li ul {display:none; list-style:none;}
#menu li:hover ul { display:block; position:absolute; list-style:none}
#menu li:hover ul li { display:table-row-group; float:none; height:30px; width: 80px; background-image:url(design/tlacitkovysouvaci.png);}
#menu li:hover ul li a { width:160px; font-size:70%; color:#FF0; text-align:center; text-decoration:none; font-weight:bold;}
#menu li:hover ul li a:hover {color:#ffffff; background-image:url(design/hovervysouvaci.png);}

And.. Here are some screenshots in Attachments.. One is with static HTML code and how it SHOULD be like.. and the second is, how it actually looks..