#navigationMenu { background: red; list-style:none; list-style-image: none; list-style-type: none; list-style-position: none; width: 0px; margin:0px; padding: 0px; } #navigationMenu li{ background: #000; height:39px; padding:0px; width:0px; } #navigationMenu span{ /* Container properties */ width:0; right:8px; padding:0; position:absolute; overflow:hidden; /* Text properties */ font-family:'Myriad Pro',Arial, Helvetica, sans-serif; font-size:18px; font-weight:bold; letter-spacing:0.6px; white-space:nowrap; line-height:39px; } #navigationMenu a{ background:url('img/navigation.jpg') no-repeat; height:39px; width:8px; display:block; position:relative; } /* General hover styles */ #navigationMenu a:hover span{ width:150px; padding:0 20px;overflow:visible; } #navigationMenu a:hover{ text-decoration:none; /* CSS outer glow with the box-shadow property */ -moz-box-shadow:0 0 5px #9ddff5; -webkit-box-shadow:0 0 5px #9ddff5; box-shadow:0 0 5px #9ddff5; } /* Green Button */ #navigationMenu .home { background-position:0 0;} #navigationMenu .home:hover { background-position:0 -39px;} #navigationMenu .home span{ background-color:#660066; color:#ffffff; /* text-shadow:1px 1px 0 #cccccc; */ } /* Blue Button */ #navigationMenu .about { background-position:-38px 0;} #navigationMenu .about:hover { background-position:-38px -39px;} #navigationMenu .about span{ background-color:#FF3300; color:#ffffff; /* text-shadow:1px 1px 0 #44a8d0; */ } /* Orange Button */ #navigationMenu .services { background-position:-76px 0;} #navigationMenu .services:hover { background-position:-76px -39px;} #navigationMenu .services span{ background-color:#FF6600; color:#ffffff; /* text-shadow:1px 1px 0 #d28344; */ } /* Yellow Button */ #navigationMenu .portfolio { background-position:-114px 0;} #navigationMenu .portfolio:hover{ background-position:-114px -39px;} #navigationMenu .portfolio span{ background-color:#FF9900; color:#ffffff; /* text-shadow:1px 1px 0 #d8b54b;*/ } /* Purple Button */ #navigationMenu .contact { background-position:-152px 0;} #navigationMenu .contact:hover { background-position:-152px -39px;} #navigationMenu .contact span{ background-color:#CBB800; color:#ffffff; /* text-shadow:1px 1px 0 #d244a6; */ } /* The styles below are only needed for the demo page */ a, a:visited,a:active { color:#0196e3; text-decoration:none; outline:none; } a:hover{ text-decoration:underline; } a img{ border:none; }