# CSS Question

**URL:** <https://forum.kirupa.com/t/css-question/256193>\
**Category:** Uncategorized\
**Created:** [March 31, 2008, 6:50pm UTC](https://forum.kirupa.com/t/css-question/256193 "2008-03-31T18:50:48Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![irishcash33](https://avatars.discourse-cdn.com/v4/letter/i/958977/32.png) [@irishcash33](https://forum.kirupa.com/u/irishcash33)\
**Post date:** [March 31, 2008, 6:50pm UTC](https://forum.kirupa.com/t/css-question/256193/1 "2008-03-31T18:50:48Z")

</div>

Hi,  
I have this menu in css/javascript. it has 3 tabs, and onmouseover it reveals links. I can’t figure out how to have each tab be a different image. If you could help me out that would be awesome.

Thanks

#menu{ font-size: 0.8em; font-weight: normal; font-style: normal; font-variant: normal; line-height: 8.7px; width:200px; background:#e6e6e7; margin-right:10px; margin-left: 0; }  
a{ text-decoration: none; display:block; width:100%; }  
ul{list-style-type:none;text-align:center;}  
li{display:inline;}

#main li a:link,ul#main li a:visited { color:#0076cc; font-size: 12pt; font-family: “trebuchet ms”; font-weight: bold; line-height: 18px; background-color: #e6e6e7; background-image: url(index/tab%201.png); background-attachment: scroll; background-position: 0 0; text-align: left; text-indent: 15px; vertical-align: 15px; height: 50px; margin: 0; padding: 0; }  
#main li a:link:hover,ul#main li a:visited:hover {background:#e6e6e7 url(index/tab%201.png);}

#ul\_one, #ul\_two, #ul\_three, #ul\_four {display:none;}

ul#main li ul.sub li a:link,ul#main ul.sub li a:visited { background:#e6e6e7; color:gray; font-size: 12px; font-family: “trebuchet ms”; height: 20px; }  
ul#main li ul.sub li a:link:hover,ul#main ul.sub li a:visited:hover { color:#fff; background: gray; }  
–\>\</style\>