Adding nice buttons to css flyout menu

[thunder11]

Im not sure if this is the right place to post the problem I have. I would like to put nice buttons on Flayout menu I have on my store located here :
www.perun.rs
Is it possible. Right now the menu looks like this

but I want to add a button like this :


for all sections : Home, Audio/Video, Knjige, Aparati za kuću and Informacije

thanks in advance

[thunder11]

Any ideas? Thanks

[kobra]

Add to your stylesheet either
#navCatTabsWrapper li or #navCatTabsWrapper ul li

Give it a background image - a blank button as the text will already be present
Probably a width & height to match image

[thunder11]

Thanks Kobra,
I hope Im not asking too much but what line should I add and where. Here is a code of my flyout menu.
stylesheet_header_menu.css :
body {
behavior: url(includes/csshover.htc);
}

/*green*/
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover {color: #000000!important;background:#FFFBEF;}
div#dropMenu li.submenu {background: url(../images/dropmenu.gif) 95% 50% no-repeat;}

/*blue
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover, div#dropMenu ul.level2 a:hover {color: #ffffff!important;background:#6C99D9;}
*/

/*red
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover, div#dropMenu ul.level2 a:hover {color: #ffffff!important;background:#DC262E;}
*/

/*grey
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover, div#dropMenu ul.level2 a:hover {color: #4f4f4f!important;background:#D5D5D5;}
*/

#dropMenuWrapper {
width:100%;
height:25px;
margin:0;
font-size:11px;
}

div#dropMenu {
width:750px;
margin:0 auto;
text-align:center;
z-index:1000;
position:relative;
}

div#dropMenu ul {
margin: 0;
padding: 0;
}

div#dropMenu li {
position: relative;
list-style: none;
margin: 0;
float: left;
line-height: 1em;
}

div#dropMenu ul.level1 {
width:750px;
margin:0 auto;
text-align:center;
background:#ffffff;
height:25px;
z-index:1000;
}

div#dropMenu li.submenu {background: url(../images/dropmenu.gif) 95% 50% no-repeat;}
div#dropMenu li:hover {}
div#dropMenu li.submenu {}
div#dropMenu li.submenu:hover {}
div#dropMenu li a {display: block; padding: 7px 25px ;text-decoration: none; text-transform:uppercase; color:#000000; text-align:center; border-right:1px solid #ffffff;}
div#dropMenu>ul a {width: auto;}
div#dropMenu ul ul {position: absolute; width: 13em;display: none;}
div#dropMenu ul ul li {border-bottom: 1px solid #CCC; width:13em;}
div#dropMenu li.submenu li.submenu {}
div#dropMenu ul.level1 li.submenu:hover ul.level2,
div#dropMenu ul.level2 li.submenu:hover ul.level3,
div#dropMenu ul.level3 li.submenu:hover ul.level4,
div#dropMenu ul.level4 li.submenu:hover ul.level5 {display:block;z-index:1000;}
div#dropMenu ul.level2 {top: 2.17em; background:#FFEECB;z-index:1000;}
div#dropMenu ul.level3, div#dropMenu ul.level4, div#dropMenu ul.level5 {top: 0; left: 13em; background:#FFFFFF}
div#dropMenu ul.level2 a {padding: 0.5em 0.25em;color: black; text-transform:none;} /* this is text color on drop-down submenu */
div#dropMenu ul.level2 a:hover {color:#FFFFFF;}

Many thanks

[kobra]

Thought those were the default navcat tabs...

It looks like div#dropMenu li would be where you would add the image

Similar to how it is already called for the sub cats

div#dropMenu li.submenu {background: url(../images/dropmenu.gif) 95% 50% no-repeat;}

[thunder11]

Many thanks Kobra. Sorry for not replying earlier. You pointed me to the right direction. Right now, Im working on how to set picture size. It seems that my css file shorten supplied images and it looks kind of ugly. I will have to work on that. If you have any ideas please tell me.
Thanks again

thunder11

[kobra]

Give it a width in the stylesheet

[thunder11]

Man, your help was outstanding. I managed to put custom images Not sure how it looks on IE since Im using Linux. Only thing that left was that I was unable to put image under section : AUDIO/VIDEO . I played with that one for 2 hours and nothing.
Many thanks Kobra. I hope I will repay you for all your efforts. Thanks