The topmenu with transparency

Good evening everyone,
Would two aid

1 - how to make the topmenu with transparency? for example, the menu template Cosmetics.

2 - need a little more down menu that applied in this field user4.

See the site www.atitudeinfo.com.br/demo/logdist2/

thank you

1. In template_css.php

#nav li:hover ul, #nav li ul, #nav > li:hover {
background:<?php echo $topMenuDropBg; ?> !important;
}

change it to:

#nav li:hover ul, #nav li ul, #nav > li:hover {
background-color:transparent;
background-image:url(..path to transparent pattern image...);
background-repeat:repeat;
}

2. add this to bottom of template_css.css
.search_box .moduletable{
padding-top:20px;
}

Ivan Good evening, thank you for the tip, but I found the following statement in my file template.css
# nav li: hover ul, # nav ul li, # nav> li: hover {

In my template.css file a statement of this top menu as shown below,

/* top menu */

#nav, #nav ul {
margin:0;
padding:0;
list-style-type:none;
list-style-position:outside;
position:absolute;
z-index:10000;
}

#nav ul {
display:none;
background:url(../images/topmenu_dropdown_bg.png) repeat-y;
}

#nav a {
display:block;
font-family:'Cabin', Arial, Helvetica, sans-serif;
padding:0;
text-decoration:none;
font-size:15px;
}

#nav li {
float:left;
position:relative;
background-image:none !important;
}

#nav > li {
border:none;
background:url(../images/topmenu_border.png) right repeat-y !important;
padding:7px 15px;
margin:0;
}

#nav li ul {
position:absolute;
top:31px;
left:0px;
padding:0 10px;
}

#nav > li.active a:hover {
padding:0;
}

#nav li:hover ul a {
background:none;
padding:5px;
font-family:Arial, Helvetica, sans-serif;
}

#nav li:hover ul li a:hover {
border:none;
position:relative;
padding:5px;
}

#nav li#current ul li a, #nav li.active ul li a, #nav li.active ul li#current a {
border:none;
position:relative;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
padding:5px;
}

#nav li ul li, #nav li ul li ul {
margin:0;
padding:0;
float:none;
cursor:pointer;
}

#nav li ul a {
width:166px;
line-height:normal;
padding:7px;
}

#nav li ul ul {
left:176px;
margin:0;
}

#nav li:hover ul ul,#nav li:hover ul ul ul,#nav li:hover ul ul ul ul {
display:none;
}

#nav li:hover ul,#nav li li:hover ul,#nav li li li:hover ul,#nav li li li li:hover ul {
display:block;
}

#nav ul li a {
font-size:13px;
font-weight:normal;
text-transform:none;
}

#nav ul ul {
top:0px;
z-index:10000;
}

#nav li#current span {
text-transform:none;
}

#nav img {
margin-right:5px;

Can you help me where I am indicating the change.

thank you

taht is from template_css.css file you need to edit is: template_css.php

Ivan Good evening, thank you for your help!
Sorry for the lack of attention,

I made the changes and it worked like transparent! thank you!


background-image: url (.. / images / topmenu_dropdown_bg.png);
background-image: url (/ images / topmenu_dropdown_bg.png);

The topmenu_dropdown_bg.png this file in the folder / templates / hot_destinations / images

but only the background image is not appearing tried adding this in two ways.

I would further help, how do I align the menus that were left to user4.

Thank you.

that css for template_css.php end up in index.php to path to image must be relative to site base:

background-image:urt(templates/hot_destinations/topmenu_dropdown_bg.png);

For other question I can not see because some flash plugin you put crashes my browser.