Problema Menu Css

b10s1992

Problema Menu Css

Questo è il mio codice


<html>
<head>

<style type="text/css">
div
{  
background:url(pagina%20salvatore/Immagine.png);
height:60;
width:800;
    font-size: 11px;
    font-family: Verdana;
}
div#MENU
{
    text-align: Center;
    padding: 5px;
    background-color: #00C;
    border: Solid  1px  #F00; width:800; height:60;
}


a.MENU1
{ 
background: url(asd.gif);
width:200;
height:200;
 background:#06F;
    color: #900;
    font-weight: Bold;
    text-decoration:none;
    width: 0;
    padding: 5px;
    border:  none 3px #000000;
	vertical-align:-23px; 
	
	
}
a.MENU2
{ 
    background-color: #0F0;
    color:;
    font-weight: Bold;
    text-decoration:none;
    width: 0;
    	 
    padding: 5px;
    border:  none 3px;
	vertical-align:-23px;
	
}a.MENU3
{ 
    background-color:;
    color:;
    font-weight: Bold;
    text-decoration:none;
    width: 0;
    	 
    padding: 5px;
    border:  none 3px;
	vertical-align:-23px;
	
}a.MENU4
{ 
    background-color:;
    color:;
    font-weight: Bold;
    text-decoration:none;
    width: 0;
    	 
    padding: 5px;
    border:  none 3px;
	vertical-align:-23px;
	
}a.MENU5
{ 
    background-color:;
    color:;
    font-weight: Bold;
    text-decoration:none;
    width: 0;
    	 
    padding: 5px;
    border:  none 3px;
	vertical-align:-23px;
	
}a.MENU6
{ 
    background-color:;
    color:;
    font-weight: Bold;
    text-decoration:none;
    width: 0;
    	 
    padding: 5px;
    border:  none 3px;
	vertical-align:-23px;
	
}a.MENU7
{ 
    background-color:;
    color:;
    font-weight: Bold;
    text-decoration:none;
    width: 0;
    	 
    padding: 5px;
    border:  none 3px;
	vertical-align:-23px;
	
}

a:hover.MENU1
{
    background-color: #778899;
    color: #EEEEEE;
    font-weight: Bold;
    text-decoration: None;
    width: 100px;
    padding: 5px;
    border: Solid 1px;
}
a:hover.MENU2
{
    background-color:;
    color:;
    font-weight: Bold;
    text-decoration: None;
    width: 100px;
    padding: 5px;
    border: Solid 1px;
}
a:hover.MENU3
{
    background-color:;
    color:;
    font-weight: Bold;
    text-decoration: None;
    width: 100px;
    padding: 5px;
    border: Solid 1px;
}
a:hover.MENU4
{
    background-color:;
    color:;
    font-weight: Bold;
    text-decoration: None;
    width: 100px;
    padding: 5px;
    border: Solid 1px;
}
 a:hover.MENU5
{
    background-color:;
    color:;
    font-weight: Bold;
    text-decoration: None;
    width: 100px;
    padding: 5px;
    border: Solid 1px;
}  
a:hover.MENU6
{
    background-color:;
    color:;
    font-weight: Bold;
    text-decoration: None;
    width: 100px;
    padding: 5px;
    border: Solid 1px;
}
a:hover.MENU7
{
    background-color:;
    color:;
    font-weight: Bold;
    text-decoration: None;
    width: 100px;
    padding: 5px;
    border: Solid 1px;
}

</style>

</head>

<body>


<div id="MENU">
    <a class="MENU1" href="#">home</a>
    <a class="MENU2" href="#">LINK # 2</a>
    <a class="MENU3" href="#">LINK # 3</a>
    <a class="MENU4" href="#">LINK # 4</a>
    <a class="MENU5" href="#">LINK # 5</a>
    <a class="MENU6" href="#">LINK # 6</a>
    <a class="MENU7" href="#">LINK # 7</a>
</div>



</body>






</html>

Ho due problemi:
-Adattare i bottoni alla grandezza del contenitore del menu
-Mettere uno sfondo nei vari bottoni

Come posso fare???