Rahmen um einzelne Bereich bei UL LI

[Matthias]

Ich habe eine Aufzählung in Listen verpackt, nun versuche ich Kramphaft um die einzelnen Punkte:

--------------
!Thema1      !
!sub1        !
!sub2        !
--------------
!Thema2      !
!sub1        !
!sub2        !
--------------

einen Rahmen zu bekommen, aber ich schaffe es einfach nicht.
Die Idee wäre das jedes Umrandung (Box) gleich hoch ist, wenn das nicht geht, dann halt mit einem fixen Wert. Jedenfalls soll es dann möglich sein, das sich alles so aufruft das es neben, bzw. Untereinder ist!

Bis jetzt bin ich soweit:

<style type="text/css">  
  
.listen{font-family: arial, sans-serif; width:600px;  position:relative; font-size:12px; z-index:100;}  
.listen ul {padding:0; margin:0; list-style: none;font-weight: bold;}  
.listen ul li {float:left;width:200px; }  
.listen ul li a, .listen ul li a:visited {display:block; text-decoration:none; color:#000;text-align:left; font-size:12px; overflow:hidden;}  
.listen ul li ul {width:200px;font-weight: normal;}  
	  
</style>

<div class="listen">  
	<ul>  
		<li>Thema1  
		<ul>  
			<li>sub1</li>  
			<li>sub2</li>  
		</ul>  
		</li>  
		<li>Thema2  
			<ul>  
				<li>sub1</li>  
				<li>sub2</li>  
				<li>sub3</li>  
				<li>sub4</li>  
		</ul>  
		</li>  
			<li>Thema3  
			<ul>  
				<li>sub1</li>  
				<li>sub2</li>  
		</ul>  
		</li>  
			<li>Thema4  
		<ul>  
			<li>sub1</li>  
			<li>sub2</li>  
		</ul>  
		</li>  
		<li>Thema5  
			<ul>  
				<li>sub1</li>  
				<li>sub2</li>  
				<li>sub3</li>  
				<li>sub4</li>  
		</ul>  
		</li>  
			<li>Thema6  
			<ul>  
				<li>sub1</li>  
				<li>sub2</li>  
		</ul>  
		</li>  
	</ul>  
</div>