Ungewünschte überlappung

[dh]

Hi Forum,

seit langem (ca. 10 Jahre?) wende ich mich wieder an's Forum.
Fange wieder an und dazu brauch man doch in aller Regel gute gegenseitige Unterstützung.

Fange gleich mal mit einer Frage an:

  
.menu1 {  
font-family:tahoma;  
font-size:8pt;  
margin:0px;  
text-indent:10px;  
width:150px;  
border:1px solid yellow;  
}  
  
.menu1 li {  
background-color:#f2f2f2;  
font-family:tahoma;  
font-size:8pt;  
border-bottom:4px solid white;  
width:150px;  
list-style-type:none;  
border:1px solid red;  
}

  
<div class=menu>Vielleicht</div>  
  
<div class=menu1>  
<ol>  
<li>Ja</li>  
<li>Nein</li>  
</ol>  
</div>  

Ergibt eine Überlappung. Kann mir jemand erzählen, wie ich diese ungewünschte Überlappung weg bekomme?

Getestet: IE 10, 11 und FF V (einer der neueren)?

Wo es ging, war glaube ich IE 7, 8, 9

Nun, schnöden Sonntag...