CSS menü kódok

Sziasztok!
CSS menü kódokat hoztam nektek, amik elég ritkák magyar design blogokon. Ezért úgy döntöttem elhozok nektek párat, amik nem agyonhasználtak, ritkák, s különlegesek. Ha visztek valamit, kérlek írjatok megjegyzést a bejegyzés alá!
A CSS menü egy fokkal könnyebb lesz mint a HTML.
A menük (sajnos csak képben tudtam idetenni, a formátum miatt):

1.

2.

3.

4.

5.

6.

7. (fejléc mellett, bal oldalon - kódos designhoz ajánlott!!)

Kódok:

 1.
#PageList1 li a:link, #PageList1 li a:visited {
 font-family: Arial, sans-serif;
text-transform:uppercase;
 font-weight:bold;
 letter-spacing: 2px;
 color: betűszín;
 background:#doboz színe;
 text-align: center;
 font-size: 10px;
 text-decoration: none;
 border-radius: 0px;
 display: block;
 line-height: 15px;
 padding: 4px;
 margin: -6px 0px;
 transition:all 1s;
 -moz-transition:all 1s;
 -webkit-transition:all 1s;
 -o-transition:all 1s;
}

#PageList1 li a:hover {
 box-shadow: 0px 20px 0px #32112B inset, 0px -20px 0px #doboz színe inset;
 text-decoration: none;
 color:betűszín;
 display: block;
 padding: 4px;
 transition:all 1s;
 -moz-transition:all 1s;
 -webkit-transition:all 1s;
 -o-transition:all 1s;
}

2.

#PageList1 li a:link, #PageList1 li a:visited {
display: inline-block;
border-bottom: dotted 1px;
width: 200px;
margin-bottom: -2px;
font-family: Georgia;
font-size: 12px;
text-align: center;
letter-spacing: 2px;
cursor: pointer;
padding: 3px;
 -webkit-transition-duration: .50s;}
#PageList1 li a:hover {
border-radius: 10px;
background: #doboz színe;
color:  betűszín; !important;
transition-timing-function: linear !important;
transition-duration: 0.6s !important;
transition-property: all !important;
box-shadow: inset 0px 30px 0px #AB2629,inset 00px 60px 0px white, inset 00px 90px 0px white;
}
a:link {
 text-decoration: none !important; }

 3.

#PageList1 {text-align: center;}

#PageList1 li a:link, #PageList1 li a:visited {
display: inline-block;
background: #doboz színe;
border-top: 1px solid white;
border-bottom: 1px white;
width: 185px;
border-radius: 1px;
font-family: Georgia;
font-size: 12px;
text-align: center;
text-transform: uppercase;
letter-spacing: 2px;
cursor: pointer;
padding: 2px;
padding:3px; -webkit-transition-duration: .50s; margin-top:3px;}
#PageList1 li a:hover {letter-spacing: 2px;opacity:1;   -webkit-transition: all 1s;
   -moz-transition: all 1s;
   -o-transition: all 1s;;}]]>

4.

#PageList1 li a:link, #PageList1 li a:visited { color: #E9EAEC; background:#D48D2D; text-align: center; font-size: 11px; text-decoration: none; display: block; margin: 0px 0px -10px 0px; border-radius: 20px;
text-transform: uppercase;
letter-spacing: 2px;
cursor: pointer;
padding:3px; -webkit-transition-duration: .50s; margin-top:3px;
transition:all 1s;
-moz-transition:all 1s;
-webkit-transition:all 1s;
-o-transition:all 1s;}

#PageList1 li a:hover { text-transform: uppercase; text-decoration: none; display: block; box-shadow: 0px 20px 0px #2D2E3B inset, 0px -20px 0px #2D2E3B inset; transition:all .5s; -moz-transition:all .5s; -webkit-transition:all .5s; -o-transition:all .5s;
transition:all 1s;
-moz-transition:all 1s;
-webkit-transition:all 1s;
-o-transition:all 1s;}
 a:link { text-decoration: none !important; }]]>

 5.

#PageList1 a:link, #PageList1 a:visited {
display: block !important;
background: #D4D6B3;
opacity: 1.0 !important;
color: #699683 !important;
width: 180px;
margin-top: -12px;
margin-left: -5px;
text-align: center;
font-family: arial;
font-size:8px;
text-transform:uppercase;
letter-spacing:2px;
cursor: pointer;
font-weight: normal !important;
position: relative;
top: 13px;
padding: 6px 6px 6px 6px !important;
 -webkit-transition-duration: .50s;
}

#PageList1 a:hover {
background-color: #699683;
color: #D4D6B3 !important;
transtion: all 0.8s;
-moz-transition: all 0.8s;
-webkit-transition: all 0.8s;
-o-transition: all 0.8s;
text-decoration: none;
}

6.

#PageList1 a:link, #PageList1 a:visited {
padding: 0em 1px;
display: block;
color:#df7257 !important;
text-align: center;
text-transform: lowercase;
font-size: 8.5px;
background: url('http://s4.ifotos.pl/img/stronypng_erpxean.png');
background-position: center;
letter-spacing: 1px;
margin-bottom: 1px;
letter-spacing: 6px;
-webkit-transition:all 0.6s ease-out;
-moz-transition:all 0.6s ease-out;
transition:all 0.6s ease-out;
box-shadow:0px 0px 0px #fff inset;
-moz-box-shadow:0px 0px 0px #fff inset;
-webkit-box-shadow:0px 0px 0px #fff inset; box-shadow: 0px 0px 1px black inset;
}
#PageList1 a:hover {
color: #df7257 !important;
text-decoration: none;
background: url('http://s4.ifotos.pl/img/stronypng_erpxean.png');
background-position: center right;
letter-spacing: 10px;
-webkit-transition:all 0.6s ease-out;
-moz-transition:all 0.6s ease-out;
transition:all 0.6s ease-out;
box-shadow:0px 0px 0px #fff inset;
-moz-box-shadow:0px 0px 0px #fff inset;
-webkit-box-shadow:0px 0px 0px #fff inset;
}

#LinkList1 a:link, #LinkList1 a:visited {
padding: 0em 1px;
display: block;
color:#e8d9cb !important;
text-align: center;
text-transform: lowercase;
font-size: 8.5px;
background: url('http://s4.ifotos.pl/img/stronypng_erpxean.png');
background-position: right;
margin-bottom: 0px;
letter-spacing: 2px;
text-transform:uppercase;
-webkit-transition:all 0.6s ease-out;
-moz-transition:all 0.6s ease-out;
transition:all 0.6s ease-out;
box-shadow:0px 0px 0px #fff inset;
-moz-box-shadow:0px 0px 0px #fff inset;
-webkit-box-shadow:0px 0px 0px #fff inset; box-shadow: 0px 0px 1px black inset;
}
#LinkList1 a:hover {
color: #e8d9cb !important;
text-decoration: none;
background: url('http://s4.ifotos.pl/img/stronypng_erpxean.png');
background-position: left;
letter-spacing: 10px;
-webkit-transition:all 0.6s ease-out;
-moz-transition:all 0.6s ease-out;
transition:all 0.6s ease-out;
box-shadow:0px 0px 0px #fff inset;
-moz-box-shadow:0px 0px 0px #fff inset;
-webkit-box-shadow:0px 0px 0px #fff inset;
}

7.

#PageList1 a {
background:#F0563E;
display:block;
text-transform:uppercase;
font-family:Calibri;
font-size:8px;
letter-spacing:2px;
padding:20px 5px 20px 5px;
text-align:center;
margin-bottom:-11px;
box-shadow:none;
transition:all 1s;
width:80px;
-moz-transition:all 1s;
-webkit-transition:all 1s;
-o-transition:all 1s;}
#PageList1 {
background:transparent;
position:absolute;
top:-680px;
left:-660px;
opacity:none;
}

#PageList1 h2 {
display:none;
}

#PageList1 a:hover {
border-radius:10px;
box-shadow:inset -45px -45px 70px #4B413F;
text-decoration:none !important;
transition:all 1s;
-moz-transition:all 1s;
-webkit-transition:all 1s;
-o-transition:all 1s;
}

 És akkor most hogyan tovább?

Higgyétek el, innen már nagyon egyszerű lesz.

1. 

Menjünk be az elrendezésbe, és adjuk hozzá az oldalak ikont. Elrendezés--->Oldalak

2.

 Sablon--->Személyre szabás--->Speciális---->Stílusalap (CSS) hozzáadása

Ide írjuk be a választott kódot és tádámm, készen is vagyunk. Ezután már semmit sem kell tennünk, csak - ha kell - a színeket beállítani, s hozzáadni a többi oldalt. 

 És néhány színkód, az átállításra:

Remélem hasznosnak találtátok ezt a bejegyzést, s fel tudtok használni pár kódot! 

Ha valahol elakadtatok, nyugodtan írjatok e-mailen! (szintiaecsert@gmail.com)

Várom véleményeteket a bejegyzésről!:)

xx Angel S.