Menu, CSS3 works, Java needed...

[anarchist]

Hey,
I need help with the menus... (http://we-are-famous.de/index.html)
I want to link the whole menu buttons, but I dont knwo how....
I also want, that the hover on the left side doesnt move the text, so I set the first menu on the left side text-align:left; but the text is now too close to the border...

All in all, I need a better solution, probably java... I hope that sb. can help me...


div.menuleft1 {
width: 156px;
line-height: 30px;
background: url('bm.png');
position:absolute;
top: 170px;
left: 10%;
color: #f7e900;
background-repeat:repeat;
-moz-border-radius: 20px;
-khtml-border-radius: 20px;
-webkit-border-radius: 20px;
-o-border-radius: 20px;
text-indent: 4%;
border-width: 0px;
-moz-border-image: url(rund.png) 0 stretch;
-webkit-border-image: url(rund.png) 0 stretch;
border-image: url(rund.png) 0 round;
-webkit-box-shadow: 0px 0px 15px #cefa42;
-moz-box-shadow: 0px 0px 10px #ff0000;
text-decoration: none;
}



div.menuleft1:hover {
color:#ffffff;
background: url ("rund1.png");
width: 200px;
line-height: 30px;
text-decoration: none;
}


div.menuleft2 {
width: 156px;
line-height: 30px;
border: 4px #e0ff1f;
background: url('bm.png');
position:absolute;
top: 230px;
left: 10%;
color: #f7e900;
background-repeat:repeat;
-moz-border-radius: 20px;
-khtml-border-radius: 20px;
-webkit-border-radius: 20px;
-o-border-radius: 20px;
text-indent: 3%;
border-width: 0px;
-moz-border-image: url(rund.png) 0 stretch;
-webkit-border-image: url(rund.png) 0 stretch;
-webkit-box-shadow: 0px 0px 15px #cefa42;
-moz-box-shadow: 0px 0px 10px #ba7e00;


}

div.menuleft2:hover {
color:#ffffff;
background: url ("rund1.png");
width: 200px;
line-height: 30px;
}

div.menuleft3 {
width: 156px;
line-height: 30px;
border: 4px #e0ff1f;
background: url('bm.png');
position:absolute;
top: 290px;
left: 10%;
color: #f7e900;
background-repeat:repeat;
-moz-border-radius: 20px;
-khtml-border-radius: 20px;
-webkit-border-radius: 20px;
-o-border-radius: 20px;
text-indent: 23px;
border-width: 0px;
-moz-border-image: url(rund.png) 0 stretch;
-webkit-border-image: url(rund.png) 0 stretch;
-webkit-box-shadow: 0px 0px 15px #cefa42;
-moz-box-shadow: 0px 0px 10px #ba7e00

}

div.menuleft3:hover {
color:#ffffff;
background: url ("rund1.png");
width: 200px;
line-height: 30px;
}

div.menuleft4 {
width: 156px;
line-height: 30px;
border: 4px #e0ff1f;
background: url('bm.png');
position:absolute;
top: 350px;
left: 10%;
color: #f7e900;
background-repeat:repeat;
-moz-border-radius: 20px;
-khtml-border-radius: 20px;
-webkit-border-radius: 20px;
-o-border-radius: 20px;
text-indent: 21px;
border-width: 0px;
-moz-border-image: url(rund.png) 0 stretch;
-webkit-border-image: url(rund.png) 0 stretch;
-webkit-box-shadow: 0px 0px 15px #cefa42;
-moz-box-shadow: 0px 0px 10px #ba7e00
}

div.menuleft4:hover {
color:#ffffff;
background: url ("rund1.png");
width: 200px;
line-height: 30px;

}

div.menuright1 {
width: 156px;
line-height: 30px;
border: 4px #e0ff1f;
background: url('bm.png');
position:absolute;
top: 170px;
right: 10%;
color: #f7e900;
background-repeat:repeat;
-moz-border-radius: 20px;
-khtml-border-radius: 20px;
-webkit-border-radius: 20px;
-o-border-radius: 20px;
text-indent: 37px;
border-width: 0px;
-moz-border-image: url(rund.png) 0 stretch;
-webkit-border-image: url(rund.png) 0 stretch;
-webkit-box-shadow: 0px 0px 15px #cefa42;
-moz-box-shadow: 0px 0px 10px #ba7e00;

text-align:right;
}

div.menuright1:hover {
color:#ffffff;
background: url ("rund1.png");
width: 200px;
line-height: 30px;
text-align:right;
}

div.menuright2 {
width: 156px;
line-height: 30px;
border: 4px #e0ff1f;
background: url('bm.png');
position:absolute;
top: 230px;
right: 10%;
color: #f7e900;
background-repeat:repeat;
-moz-border-radius: 20px;
-khtml-border-radius: 20px;
-webkit-border-radius: 20px;
-o-border-radius: 20px;
text-indent: 25px;
border-width: 0px;
-moz-border-image: url(rund.png) 0 stretch;
-webkit-border-image: url(rund.png) 0 stretch;
-webkit-box-shadow: 0px 0px 15px #cefa42;
-moz-box-shadow: 0px 0px 10px #ba7e00
}

div.menuright2:hover {
color:#ffffff;
background: url ("rund1.png");
width: 200px;
line-height: 30px;
text-align:right;
}

div.menuright3 {
width: 156px;
line-height: 30px;
border: 4px #e0ff1f;
background: url('bm.png');
position:absolute;
top: 290px;
right: 10%;
color: #f7e900;
background-repeat:repeat;
-moz-border-radius: 20px;
-khtml-border-radius: 20px;
-webkit-border-radius: 20px;
-o-border-radius: 20px;
text-indent: 34px;
border-width: 0px;
-moz-border-image: url(rund.png) 0 stretch;
-webkit-border-image: url(rund.png) 0 stretch;
-webkit-box-shadow: 0px 0px 15px #cefa42;
-moz-box-shadow: 0px 0px 10px #ba7e00
}

div.menuright3:hover {
color:#ffffff;
background: url ("rund1.png");
width: 200px;
line-height: 30px;
}

div.menuright4 {
width: 156px;
line-height: 30px;
border: 4px #e0ff1f;
background: url('bm.png');
position:absolute;
top: 350px;
right: 10%;
color: #f7e900;
background-repeat:repeat;
-moz-border-radius: 20px;
-khtml-border-radius: 20px;
-webkit-border-radius: 20px;
-o-border-radius: 20px;
text-indent: 1%;
border-width: 0px;
-moz-border-image: url(rund.png) 0 stretch;
-webkit-border-image: url(rund.png) 0 stretch;
-webkit-box-shadow: 0px 0px 15px #cefa42;
-moz-box-shadow: 0px 0px 10px #ba7e00
}

div.menuright4:hover {
color:#ffffff;
background: url ("rund1.png");
width: 200px;
line-height: 30px;
}