Warum wird das Menü nach verlinkung so groß ?

[Tim]

Hallo ich habe ein Menü geschrieben :

Html :
------------------------------------
<div id="Menu">

<ul>
<li><a href="#">1</a>
<ul>
<li><a href="#">11</a></a></li>
<li><a href="#">22</a></li>
<li><a href="#">33</a></li>
<li><a href="#">44</a></li>
</ul>
</li>
</ul>

</div>

------------------------------------------
Css:
-------------------------------------------
#div  {
padding:20px;
margin-top:60px;
margin-left :25%;
margin-right:25%;
background-color:white ;

}
#div h1 {
font-size:75px;
color:black;

}
#Menu ul {
margin:0;
padding:0;
line-height:30px;
}
#Menu li {
margin:0;
padding:0;
list-style:none;
float:left;
position:relative;
background-color:black;
font-size:20px;
}
#Menu ul li a {
text-decoration:none;
font-family:Calibri;
text-align:center;
width:150px;
height:30px;
display:block;
}
#Menu ul ul {
position:absolute;
top:30px;
visibility:hidden;
}
#Menu ul li:hover ul {
visibility:visible;
}
#Menu ul ul li:hover {
background:yellow;
}
----------------------------------------
Wenn ich aber jetzt den Menüpunkt 11 zu einer anderen (meiner) Seite verlinken will ensteht ein großer Abstand zu "1"...
Ich habe es so gemacht :
<li><a href="#"><a href="src/index.html">Der Name "Karate"</a></a></li>
Nun ensteht aber dieser Abstand ...
warum ?

[gast_42]

Ich habe es so gemacht :
<li><a href="#"><a href="src/index.html">Der Name "Karate"</a></a></li>

Abstand weil a mit display:block in a mit display:block

a darf aber sowieso kein a enthalten (logisch oder wie soll der Browser wissen, welchem Link er folgen soll?)