CSS3 multi-color style switch menu

<! DOCTYPE html>
<meta charset= "Utf-8"/>
<title>Shijiazhuang Organic Fertilizer</title>
<style>
Body {
font:14px/1.3 Arial,sans-serif;
}
. container {
Background-color: #EEEEEE;
border-radius:5px 5px 5px 5px;
height:400px;
margin:30px Auto;
padding:15px;
width:750px;
}
#nav, #nav ul {
List-style:none outside none;
margin:0;
padding:0;
}
#nav {
Background-color: #000000;
border-radius:5px 5px 5px 5px;
box-shadow:3px 3px 3px rgba (0, 0, 0, 0.5);
display:table;
padding:10px;
position:relative;
}
#nav ul {
background-color:red;
border:1px solid red;
border-radius:0 5px 5px 5px;
border-width:0 1px 1px;
box-shadow:0 5px 5px rgba (0, 0, 0, 0.5);
Left: -9999px;
Overflow:hidden;
padding:20px 0 10px;
Position:absolute;
Top: -9999px;
-moz-transform:scaley (0);
-ms-transform:scaley (0);
-o-transform:scaley (0);
-webkit-transform:scaley (0);
Transform:scaley (0);
-moz-transform-origin:0 0;
-ms-transform-origin:0 0;
-o-transform-origin:0 0;
-webkit-transform-origin:0 0;
transform-origin:0 0;
-moz-transition:-moz-transform 0.1s linear;
-ms-transition:-ms-transform 0.1s linear;
-o-transition:-o-transform 0.1s linear;
-webkit-transition:-webkit-transform 0.1s linear;
Transition:transform 0.1s linear;
}
#nav Li {
Float:left;
position:relative;
}
#nav Li a {
Color: #FFFFFF;
Display:block;
font-size:16px;
PADDING:7PX 20px;
Text-decoration:none;
}
#nav Li:hover > a {
background-color:red;
border-radius:5px 5px 5px 5px;
Color: #FFFFFF;
}
#nav Li:hover > A.hsubs {
border-radius:5px 5px 0 0;
}
#nav Li:hover Ul.subs {
left:0;
top:34px;
width:180px;
-moz-transform:scaley (1);
-ms-transform:scaley (1);
-o-transform:scaley (1);
-webkit-transform:scaley (1);
}
#nav ul Li {
width:100%;
}
#nav ul Li:hover > a {
Background-color: #222222!important;
border-radius:5px 5px 5px 5px;
}
/* Colors */
. colorscheme {
height:32px;
List-style:none outside none;
margin:0 Auto 25px;
width:320px;
}
. ColorScheme a {
Cursor:pointer;
Float:left;
height:30px;
Margin:0 5px;
width:30px;
}
. ColorScheme. Red {
background-color:red;
}
. ColorScheme. Orange {
Background-color:orange;
}
. ColorScheme. Pink {
Background-color:pink;
}
. ColorScheme. Green {
Background-color:green;
}
. ColorScheme. Blue {
Background-color:blue;
}
. ColorScheme. Indigo {
Background-color:indigo;
}
. ColorScheme. Violet {
Background-color:violet;
}
. ColorScheme. Grey {
Background-color:grey;
}

#red: Target ~ #nav ul {
background-color:red;
border:1px solid red;
}
#orange: Target ~ #nav ul {
Background-color:orange;
border:1px solid Orange;
}
#pink: Target ~ #nav ul {
Background-color:pink;
BORDER:1PX solid Pink;
}
#green: Target ~ #nav ul {
Background-color:green;
border:1px solid Green;
}
#blue: Target ~ #nav ul {
Background-color:blue;
BORDER:1PX solid blue;
}
#indigo: Target ~ #nav ul {
Background-color:indigo;
border:1px Solid Indigo;
}
#violet: Target ~ #nav ul {
Background-color:violet;
border:1px solid Violet;
}
#grey: Target ~ #nav ul {
Background-color:grey;
BORDER:1PX solid Grey;
}

#red: Target ~ #nav li:hover > a {
background-color:red;
}
#orange: Target ~ #nav li:hover > a {
Background-color:orange;
}
#pink: Target ~ #nav li:hover > a {
Background-color:pink;
}
#green: Target ~ #nav li:hover > a {
Background-color:green;
}
#blue: Target ~ #nav li:hover > a {
Background-color:blue;
}
#indigo: Target ~ #nav li:hover > a {
Background-color:indigo;
}
#violet: Target ~ #nav li:hover > a {
Background-color:violet;
}
#grey: Target ~ #nav li:hover > a {
Background-color:grey;
}
#nav, #nav ul {
List-style:none outside none;
margin:0;
padding:0;
}
#nav {
Background-color: #000000;
border-radius:5px 5px 5px 5px;
box-shadow:3px 3px 3px rgba (0, 0, 0, 0.5);
display:table;
padding:10px;
position:relative;
}
#nav ul {
background-color:red;
border:1px solid red;
border-radius:0 5px 5px 5px;
border-width:0 1px 1px;
box-shadow:0 5px 5px rgba (0, 0, 0, 0.5);
Left: -9999px;
Overflow:hidden;
padding:20px 0 10px;
Position:absolute;
Top: -9999px;
-moz-transform:scaley (0);
-ms-transform:scaley (0);
-o-transform:scaley (0);
-webkit-transform:scaley (0);
Transform:scaley (0);
-moz-transform-origin:0 0;
-ms-transform-origin:0 0;
-o-transform-origin:0 0;
-webkit-transform-origin:0 0;
transform-origin:0 0;
-moz-transition:-moz-transform 0.1s linear;
-ms-transition:-ms-transform 0.1s linear;
-o-transition:-o-transform 0.1s linear;
-webkit-transition:-webkit-transform 0.1s linear;
Transition:transform 0.1s linear;
}
#nav Li {
Float:left;
position:relative;
}
#nav Li a {
Color: #FFFFFF;
Display:block;
font-size:16px;
PADDING:7PX 20px;
Text-decoration:none;
}
#nav Li:hover > a {
background-color:red;
border-radius:5px 5px 5px 5px;
Color: #FFFFFF;
}
#nav Li:hover > A.hsubs {
border-radius:5px 5px 0 0;
}
#nav Li:hover Ul.subs {
left:0;
top:34px;
width:180px;
-moz-transform:scaley (1);
-ms-transform:scaley (1);
-o-transform:scaley (1);
-webkit-transform:scaley (1);
}
#nav ul Li {
width:100%;
}
#nav ul Li:hover > a {
Background-color: #222222!important;
border-radius:5px 5px 5px 5px;
}
/* Colors */
. colorscheme {
height:32px;
List-style:none outside none;
margin:0 Auto 25px;
width:320px;
}
. ColorScheme a {
Cursor:pointer;
Float:left;
height:30px;
Margin:0 5px;
width:30px;
}
. ColorScheme. Red {
background-color:red;
}
. ColorScheme. Orange {
Background-color:orange;
}
. ColorScheme. Pink {
Background-color:pink;
}
. ColorScheme. Green {
Background-color:green;
}
. ColorScheme. Blue {
Background-color:blue;
}
. ColorScheme. Indigo {
Background-color:indigo;
}
. ColorScheme. Violet {
Background-color:violet;
}
. ColorScheme. Grey {
Background-color:grey;
}
#red: Target ~ #nav ul {
background-color:red;
border:1px solid red;
}
#orange: Target ~ #nav ul {
Background-color:orange;
border:1px solid Orange;
}
#pink: Target ~ #nav ul {
Background-color:pink;
BORDER:1PX solid Pink;
}
#green: Target ~ #nav ul {
Background-color:green;
border:1px solid Green;
}
#blue: Target ~ #nav ul {
Background-color:blue;
BORDER:1PX solid blue;
}
#indigo: Target ~ #nav ul {
Background-color:indigo;
border:1px Solid Indigo;
}
#violet: Target ~ #nav ul {
Background-color:violet;
border:1px solid Violet;
}
#grey: Target ~ #nav ul {
Background-color:grey;
BORDER:1PX solid Grey;
}

#red: Target ~ #nav li:hover > a {
background-color:red;
}
#orange: Target ~ #nav li:hover > a {
Background-color:orange;
}
#pink: Target ~ #nav li:hover > a {
Background-color:pink;
}
#green: Target ~ #nav li:hover > a {
Background-color:green;
}
#blue: Target ~ #nav li:hover > a {
Background-color:blue;
}
#indigo: Target ~ #nav li:hover > a {
Background-color:indigo;
}
#violet: Target ~ #nav li:hover > a {
Background-color:violet;
}
#grey: Target ~ #nav li:hover > a {
Background-color:grey;
}
</style>
<body>
<div class= "Container" >
<span id= "Red" ></span>
<span id= "Orange" ></span>
<span id= "Pink" ></span>
<span id= "Green" ></span>
<span id= "Blue" ></span>
<span id= "Indigo" ></span>
<span id= "Violet" ></span>
<span id= "Grey" ></span>
<div class= "ColorScheme" >
<a href= "#red" class= "Red" ></a>
<a href= "#orange" class= "Orange" ></a>
<a href= "#pink" class= "Pink" ></a>
<a href= "#green" class= "green" ></a>
<a href= "#blue" class= "Blue" ></a>
<a href= "#indigo" class= "Indigo" ></a>
<a href= "#violet" class= "Violet" ></a>
<a href= "#grey" class= "Grey" ></a>
</div>
<ul id= "NAV" >
<li><a href= "http://www.codefans.net/" >Home</a></li>
<li><a class= "Hsubs" href= "#" >menu 1</a>
<ul class= "Subs" >
<li><a href= "#" >submenu 1</a></li>
<li><a href= "#" >submenu 2</a></li>
<li><a href= "#" >submenu 3</a></li>
<li><a href= "#" >submenu 4</a></li>
<li><a href= "#" >submenu 5</a></li>
</ul>
</li>
<li><a class= "Hsubs" href= "#" >menu 2</a>
<ul class= "Subs" >
<li><a href= "#" >submenu 2-1</a></li>
<li><a href= "#" >submenu 2-2</a></li>
<li><a href= "#" >submenu 2-3</a></li>
<li><a href= "#" >submenu 2-4</a></li>
<li><a href= "#" >submenu 2-5</a></li>
<li><a href= "#" >submenu 2-6</a></li>
<li><a href= "#" >submenu 2-7</a></li>
<li><a href= "#" >submenu 2-8</a></li>
</ul>
</li>
<li><a class= "Hsubs" href= "#" >menu 3</a>
<ul class= "Subs" >
<li><a href= "#" >submenu 3-1</a></li>
<li><a href= "#" >submenu 3-2</a></li>
<li><a href= "#" >submenu 3-3</a></li>
<li><a href= "#" >submenu 3-4</a></li>
<li><a href= "#" >submenu 3-5</a></li>
</ul>
</li>
<li><a href= "#" >menu 4</a></li>
<li><a href= "#" >menu 5</a></li>
<li><a href= "#" >menu 6</a></li>
<li><a href= "#" >Back</a></li>
</ul>
</div>
</body>