Bring up the menu
 

Hello,
I want to bring up the menu up a bit more to be roughly lined up with the logo, I tried to add some padding code but it does not work.

Example: http://www.billieshimoni.co.il

I use CSS codes:
ul.rMenu {
padding:0px !important;
list-style:none !important;

}
ul.rMenu li {
margin-top:0px !important;
padding:0px !important;

}
ul.rMenu li a {
margin:0px !important;
padding: 0px 15px !important;
color:#f4f4f4 !important;
font:bold 18px Arial !important;
text-decoration:none !important;
border: solid 0px #FFFFFF;
border-right: 0px solid #aaaaaa;
border-left: 0px solid #aaaaaa;

}

div#menu1 ul.rMenu li {
background-color: transparent;


}
div#menu1 ul.rMenu {
background-color: transparent;

}
div#menu1 ul.rMenu li:hover > a,
ul.rMenu li a:hover {
color:#f4f4f4 !important;
border-right: 0px solid #aaaaaa;
color:#ff4b33 !important;
background-image: URL('http://www.billieshimoni.co.il/wp-content/uploads/2012/10/MENU.jpg') !important;

}
ul.rMenu li.current_page_item a {
color: #f4f4f4 !important;
background-image: URL('http://www.billieshimoni.co.il/wp-content/uploads/2012/10/MENU.jpg') !important;
}

#menu1 {
width: 999px !important;
}

div#menu1 {
border-bottom: 0px solid #461D7C;
background-image: URL('http://www.billieshimoni.co.il/wp-content/uploads/2012/10/MENU.jpg') !important;

}

Thank you.

Use absolute positioning for #rmenu2

#rmenu2 {
position: absolute;
top: 115px;
height: 115px;
}

This code?

Thank you

I have another question on the subject,
How can I make a menu so that it is exactly the image with lines between each category
The sub-menu will be transparent like the picture?
I tried to use my code but it does not look good.

What's wrong with my code? Or some code I can add?

ul.rMenu {
padding:0px !important;
list-style:none !important;

}
ul.rMenu li {
margin-top:0px !important;
padding:0px !important;

}
ul.rMenu li a {
margin:0px !important;
padding: 0px 15px !important;
color:#f4f4f4 !important;
font:bold 18px Arial !important;
text-decoration:none !important;
border: solid 0px #FFFFFF;
border-right: 1px solid #f4f4f4;
border-left: 1px solid #f4f4f4;

}

div#menu1 ul.rMenu li {
background-color: transparent;


}
div#menu1 ul.rMenu {
background-color: transparent;

}
div#menu1 ul.rMenu li:hover > a,
ul.rMenu li a:hover {
color:#f4f4f4 !important;
border-right: 1px solid #f4f4f4;
border-left: 1px solid #f4f4f4;
color:#ff4b33 !important;
background: #575c60 !important;

}
ul.rMenu li.current_page_item a {
color: #f4f4f4 !important;
background: #575c60 !important;


}

#menu1 {
width: 999px !important;
}

div#menu1 {
border-bottom: 0px solid #461D7C;
background: #575c60 !important;

}
#rmenu2 {
position: absolute;
top: 115px;
height: 115px;
}
.sub-menu {
top: 22px !important;
}
.sub-menu li {
background: transparent url('http://www.billieshimoni.co.il/wp-content/uploads/2012/10/MENU.jpg');
opacity: 0.65;
width: 100% !important;
text-align: right;
border-right: 0px solid #575c60;
border-left: 1px solid #575c60;
}

Thanks for everything

To get the lines you may have to play with borders on the list items. For a transparent background I suggest using a semi transparent png as opacity will affect the text as well as the background.

Thanks for the reply, but unfortunately it does not work.:(
I tried to put a semi transparent png and Agein it not transparent.
This can be done another way?

Thank you.

You also have to make sure the background color is transparent along with the semi transparent png file. Also I can't get to your site.

I added the code and again it does not work, seems to me there is a problem in my code, but I do not know where.

.sub-menu {
top: 22px !important;
}
.sub-menu li {
background: transparent url('http://www.billieshimoni.co.il/wp-content/uploads/2012/10/semi_transparent6.png');
background-color: transparent;
width: 100% !important;
text-align: right;
border-right: 0px solid #575c60;
border-left: 1px solid #575c60;
}

Site url: http://billieshimoni.co.il.preview8.logate.co.il

Thanks for your help.

You may have to add !important to the background image line. You also don't need the background-color line since the color is included in your shorthand.

It's still not working :(
I fixed as you said:

.sub-menu {
top: 22px !important;
}
.sub-menu li {
background: transparent url('http://www.billieshimoni.co.il/wp-content/uploads/2012/10/transparent1.png') !important;
width: 100% !important;
text-align: right;
border-right: 0px solid #575c60;
border-left: 1px solid #575c60;
}

two things
1) you have two lines of dashes in the CSS inserts. these are not valid comment lines and can cause havoc with some browsers causing everything else to be ignored. if you want a line of dashes, it should be
2) I noticed you have the following in the CSS Inserts
and it is being ignored. "Why?" you might ask yourself. The answer is that theere is a more specific CSS Selector (td#footer) that is taking precidence. It is a good idea to understand how CSS Precidence works. Wirh a google search you should be able to find some explainations.

Thanks for the help, every time I learn something new :), I corrected it. But again, no drop-down menu becomes transparent. I want the drop-down menu will be like the picture. Why is it not working? It's so complicated to do this?
The site picture, was built in WordPress, maybe can see how transparent drop down menu built there?
http://www.marc-michaels.com

it uses

This code does not not work, he makes a white menu.
Well thanks for the help, I will do a regular menu.