Anabell (ohne Rennpferde): li ul LINKS unten ausrichten + bei hover langsam vergrössern!

Beitrag lesen

Ich möchte ein Menü gestalten, in der die Links als Vierecke zu sehen sindm beim anklicken sollen sie groß werden. Jetzt mein Problem:

Meine Links, Vierecke sind oben ausgerichtet, sie sollen allerdings unten an der Linie sein, ich habe es schon mit bottom:0 versucht aber irgendwie bekomme ich es nicht hin.

Weiter habe ich noch eine weitere Frage, aber ich weis nicht ob so was mit CSS zu verwirklichen ist. Wenn man auf einen Link, Viereck geht, kommt sofort das grosse Viereck, was ja OK ist, schöner wäre es aber, wenn es langsam von KLEIN auf GROSS gehen würde....

Puhh ich hoffe ich habe einigermassen verständlich formuliert.

Einen schönen Sonntag noch und vieleicht die eine oder andere Idee und Anmerkung

Ani

  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
	  
<html>  
<head>  
	<title>Test</title>  
	<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />  
	<style type="text/css">  
  
	  
ul.haupt {  
list-style-type: none;  
height:200px;border: 1px solid #CDBE70;  
}	  
  
li.haupt {  
margin: 2px;  
float:left;  
}	  
a.haupt {  
display: block;  
}  
  
a.haupt:link, a.haupt:visited {  
background: #F1EDC2;  
border: 1px solid #CDBE70;  
color: #000;  
width: 100px;  
height: 100px;  
padding: 5px;  
text-decoration: none;  
}  
  
a.haupt:hover{  
border: 1px solid #008800;  
color: #191970;  
width: 150px;  
height: 150px;  
padding: 5px;  
text-decoration: none;  
}  
  
	</style>  
	  
</head>  
<body>  
<ul class="haupt">  
<li class="haupt"><a class="haupt" href="xxxx">1</a></li>  
<li class="haupt"><a class="haupt" href="xxxx">2</a></li>  
<li class="haupt"><a class="haupt" href="xxxx">3</a></li>  
<li class="haupt"><a class="haupt" href="xxxx">4</a></li>  
<li class="haupt"><a class="haupt" href="xxxx">5</a></li>  
</ul>  
  
  
</body>  
</html>