CSS3 Language Selection Menu

Mit CSS3 ist/wird das Leben um ein vielfaches einfacher. Schatten, Abrundungen, Rotationen und vieles mehr lassen sich bequem ohne Bilder realisieren. Auch die Klassen/ID Bezeichnungen können aufgrund der Vielzahl neuer CSS Selektoren auf ein absolutes minimum reduziert werden. Hier ein kleines Beispiel einer Sprachauswahl, das derzeit nur in Firefox, Chrome und Safari funktioniert. IE8 und auch Opera können leider beide noch nichts mit dem box-shadow und border-radius anfangen.

Example

Check out the CSS 3 Language Selection Menu
Works with: Firefox, Chrome, Safari
Does not work with: IE8, Opera10

HTML Code

<ul>
<li><a href="#" title="">Deutsch</a></li>
<li><a href="#" title="">English</a></li>
<li><a href="#" title="">Español</a></li>
<li><a href="#" title="">Français</a></li>
<li><a href="#" title="">??</a></li>
<li><a href="#" title="">???????</a></li>
<li><a href="#" title="">???</a></li>
</ul>

CSS Code

ul {
width:150px;
height:28px;
font:13px Arial, Helvetica, sans-serif;
border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; 
box-shadow:0px 0px 4px #979797; -moz-box-shadow:0px 0px 4px #979797; -webkit-box-shadow:0px 0px 4px #979797; 
margin:0px; 
padding:0px;
overflow:hidden; 
}

ul:hover {height:auto;} 

ul a {
color:#333333; 
text-decoration:none; 
display:block; 
line-height:22px; 
padding:0 0 0 32px; 
background:url(lang.gif) no-repeat;
}

ul a:hover {font-weight:bold;}

ul li {
width:100%; 
display:block; 
border-bottom:1px dotted #bfbfbf;
}

ul li:first-of-type {border-bottom:1px solid #cccccc;}
ul li:last-of-type {border:none;}

ul li:nth-of-type(1) a {background-position:8px 9px; line-height:28px;}
ul li:nth-of-type(2) a {background-position:8px -19px;}
ul li:nth-of-type(3) a {background-position:8px -41px;}
ul li:nth-of-type(4) a {background-position:8px -63px;}
ul li:nth-of-type(5) a {background-position:8px -85px;}
ul li:nth-of-type(6) a {background-position:8px -107px;}
ul li:nth-of-type(7) a {background-position:8px -129px;}