Neat rollover effect

[jeana]

I think this is css but am not very familiar on how to manipulate the css file. Can anyone help?

 

I really like the rollover effect on the menu bar to the left at this site:

 

http://shop.kaimart.com/

 

I especially like the darker color background and dotted outline effect.

 

I'm pretty sure its a simple thing to do, I just need to be pointed in the right direction.

 

Thanks

Jeana

[seCret steVe]

Dont get me wrong but im not stealing code....im just showing you what they use

 

body {font:Verdana, Arial, Helvetica, sans-serif}

body { scrollbar-face-color: #eeeeee; scrollbar-shadow-color: #000000; scrollbar-highlight-color: #ffffff; scrollbar-darkshadow-color: #ffffff; scrollbar-track-color: #cccccc; scrollbar-arrow-color: #000000}

p {font: 10pt Verdana, Arial, Helvetica, sans-serif}

td {font: 10pt Verdana, Arial, Helvetica, sans-serif}

div {font: 10pt Verdana, Arial, Helvetica, sans-serif}

 

a:link   {font-family: "Verdana", "Arial", "sans-serif"; color: #3366FF; text-decoration: none}

a:visited  {font-family: "Verdana", "Arial", "sans-serif"; color: #3366FF; text-decoration: none}

a:hover  {font-family: "Verdana", "Arial", "sans-serif"; color: #000000; text-decoration: none}

 

a:link.footer   {font-family: "Verdana", "Arial", "sans-serif"; color: #262644; text-decoration: none}

a:visited.footer  {font-family: "Verdana", "Arial", "sans-serif"; color: #262644; text-decoration: none}

a:hover.footer  {border-bottom:2px solid #FF9900; font-family: "Verdana", "Arial", "sans-serif"; color: #262644; text-decoration: none}

 

 

.CategoryA {font-family: "Verdana", "Arial"; color: #999999; font-size: 10px; background-color: #E8EAF4}

.CategoryA a {font-family: "Verdana", "Arial"; color: #666666; border:1px dotted #EEEEEE; text-decoration: none; position:relative; display:block; text-decoration: none; padding-top: 3px; padding-bottom: 3px; padding-left: 2px}

.CategoryA a:visited {font-family: "Verdana", "Arial"; color: #666666; border:1px dotted #EEEEEE; text-decoration: none; position:relative; display:block; text-decoration: none; padding-top: 3px; padding-bottom: 3px; padding-left: 2px}

.CategoryA a:hover {font-family: "Verdana", "Arial";  color: #000000; border:1px dotted #3333CC; text-decoration: none; background-color:#CED5EA}

 

.CategoryC {font-family: "Verdana", "Arial"; color: #999999; font-size: 10px; background-color: #EDF3E9}

.CategoryC a {font-family: "Verdana", "Arial"; color: #666666; border:1px dotted #EEEEEE; text-decoration: none; position:relative; display:block; text-decoration: none; padding-top: 3px; padding-bottom: 3px; padding-left: 2px}

.CategoryC a:visited {font-family: "Verdana", "Arial"; color: #666666; border:1px dotted #EEEEEE; text-decoration: none; position:relative; display:block; text-decoration: none; padding-top: 3px; padding-bottom: 3px; padding-left: 2px}

.CategoryC a:hover {font-family: "Verdana", "Arial";  color: #000000; border:1px dotted #669900; text-decoration: none; background-color:#E3EBE0}

 

.CategoryB {font-family: "Verdana", "Arial"; color: #999999; font-size: 10px; background-color: #FDE8E9}

.CategoryB a {font-family: "Verdana", "Arial"; color: #666666; border:1px dotted #EEEEEE; text-decoration: none; position:relative; display:block; text-decoration: none; padding-top: 3px; padding-bottom: 3px; padding-left: 2px}

.CategoryB a:visited {font-family: "Verdana", "Arial"; color: #666666; border:1px dotted #EEEEEE; text-decoration: none; position:relative; display:block; text-decoration: none; padding-top: 3px; padding-bottom: 3px; padding-left: 2px}

.CategoryB a:hover {font-family: "Verdana", "Arial";  color: #000000; border:1px dotted #FF0000; text-decoration: none; background-color:#F9B9BB}

 

.CategoryD {font-family: "Verdana", "Arial"; color: #999999; font-size: 10px; background-color: #FEF7E7}

.CategoryD a {font-family: "Verdana", "Arial"; color: #666666; border:1px dotted #EEEEEE; text-decoration: none; position:relative; display:block; text-decoration: none; padding-top: 3px; padding-bottom: 3px; padding-left: 2px}

.CategoryD a:visited {font-family: "Verdana", "Arial"; color: #666666; border:1px dotted #EEEEEE; text-decoration: none; position:relative; display:block; text-decoration: none; padding-top: 3px; padding-bottom: 3px; padding-left: 2px}

.CategoryD a:hover {font-family: "Verdana", "Arial";  color: #000000; border:1px dotted #FF9900; text-decoration: none; background-color:#FBEBCE}

 

.CategoryF {font-family: "Verdana", "Arial"; color: #999999; font-size: 10px; background-color: #F7F1FE}

.CategoryF a {font-family: "Verdana", "Arial"; color: #666666; border:1px dotted #EEEEEE; text-decoration: none; position:relative; display:block; text-decoration: none; padding-top: 3px; padding-bottom: 3px; padding-left: 2px}

.CategoryF a:visited {font-family: "Verdana", "Arial"; color: #666666; border:1px dotted #EEEEEE; text-decoration: none; position:relative; display:block; text-decoration: none; padding-top: 3px; padding-bottom: 3px; padding-left: 2px}

.CategoryF a:hover {font-family: "Verdana", "Arial";  color: #000000; border:1px dotted #9900FF; text-decoration: none; background-color:#EBDFFD}

 

.CategoryE {font-family: "Verdana", "Arial"; color: #999999; font-size: 10px; background-color: #EFF9FE}

.CategoryE a {font-family: "Verdana", "Arial"; color: #666666; border:1px dotted #EEEEEE; text-decoration: none; position:relative; display:block; text-decoration: none; padding-top: 3px; padding-bottom: 3px; padding-left: 2px}

.CategoryE a:visited {font-family: "Verdana", "Arial"; color: #666666; border:1px dotted #EEEEEE; text-decoration: none; position:relative; display:block; text-decoration: none; padding-top: 3px; padding-bottom: 3px; padding-left: 2px}

.CategoryE a:hover {font-family: "Verdana", "Arial";  color: #000000; border:1px dotted #00BFFF; text-decoration: none; background-color:#D5FFFE}

 

.CategoryG {font-family: "Verdana", "Arial"; color: #999999; font-size: 10px; background-color: #EEEEEE}

.CategoryG a {font-family: "Verdana", "Arial"; color: #666666; border:1px dotted #EEEEEE; text-decoration: none; position:relative; display:block; text-decoration: none; padding-top: 3px; padding-bottom: 3px; padding-left: 2px}

.CategoryG a:visited {font-family: "Verdana", "Arial"; color: #666666; border:1px dotted #EEEEEE; text-decoration: none; position:relative; display:block; text-decoration: none; padding-top: 3px; padding-bottom: 3px; padding-left: 2px}

.CategoryG a:hover {font-family: "Verdana", "Arial";  color: #000000; border:1px dotted #000000; text-decoration: none; background-color:#CCCCCC}

 

the link to this is: http://shop.kaimart.com/common.css

 

it is all done by a css file here i will break it down for you:

 

.CategoryA {font-family: "Verdana", "Arial"; color: #999999; font-size: 10px; background-color: #E8EAF4}  

.CategoryA a {font-family: "Verdana", "Arial"; color: #666666; border:1px dotted #EEEEEE; text-decoration: none; position:relative; display:block; text-decoration: none; padding-top: 3px; padding-bottom: 3px; padding-left: 2px}  

.CategoryA a:visited {font-family: "Verdana", "Arial"; color: #666666; border:1px dotted #EEEEEE; text-decoration: none; position:relative; display:block; text-decoration: none; padding-top: 3px; padding-bottom: 3px; padding-left: 2px}  

.CategoryA a:hover {font-family: "Verdana", "Arial"; color: #000000; border:1px dotted #3333CC; text-decoration: none; background-color:#CED5EA}  

 

We will use the above as there example and here goes:

 

.CatagoryA a is the link...and what it does....

 

.CatagoryA a:visted is the what is showes after the person has visited that portion of the site.

 

.CatagoryA a:hover is what makes that fance effect when you do the role overs...

 

 

Hope that answers your questions....if you have any other questions just pm me or something

[Guest]

A great CSS tutorial:

 

http://www.w3schools.com/css/default.asp

[jeana]

Wow I couldn't have asked for a better response. Thanks very much for taking the time to go into further detail for me - you're such a pup!!!

[Acronym B.O.Y.]

What's a pup? :)

[toolcrazy]

Maybe a "Cool Dude" in the UK

[jeana]

Pup = puppy = sweet thing that just makes you go "awwww".... :D

[seCret steVe]

thanks.....ill take that as a compliment....as you are welcome for the fast response