How do you remove the borders around menu items in the Menu 2 category menu? I tried the following CSS and it makes the menu transparent which is what I want, but I still see the borders around each item.

div#menu2 ul.rMenu {
background:transparent;
border-bottom:transparent !important;
border-top:transparent !important;
border-left:transparent !important;
border-right:transparent !important;
}

ul.rMenu li a:link, ul.rMenu li a:active,
ul.rMenu li a:visited, ul.rMenu li {
background: transparent !important;
}
ul.rMenu li a:hover {
background: transparent !important;
}

did you look in the MENU 2 theme options?

Yes I did.

Is says in the "Border around all menu items" help section... Every item of the menu bar, plus the menu bar itself, will be wrapped into this border. To have no borders in the first level, give it the same color as the background color for first level items. Don't use semicolons here. Note: Leave the border width at 1px, match colors if you want to make it dissapear.

So I have "Border around all menu items" set to "solid 1px #6E61F7" and the "Background color" setting set to "6E61F7" but I still see a small border around each menu item top, bottom, left, right even though in the CSS settings I told it to make it transparent.

-Please advise.

what is the url?

http://www.selfdefensegearco.com/per...lywood-actors/

UPDATE: MY GOD I FIXED IT MYSELF: HERE IS MY CSS CODE:

div#menu2 {
background:transparent;
border-bottom:transparent !important;
border-top:transparent !important;
border-left:transparent !important;
border-right:transparent !important;
}

div#menu2 ul.rMenu {
background:transparent;
border-bottom:transparent !important;
border-top:transparent !important;
border-left:transparent !important;
border-right:transparent !important;
}

ul.rMenu li a:link, ul.rMenu li a:active,
ul.rMenu li a:visited, ul.rMenu li {
background: transparent !important;
border-bottom:transparent !important;
border-top:transparent !important;
border-left:transparent !important;
border-right:transparent !important;
}
ul.rMenu li a:hover {
background: transparent !important;
border-bottom:transparent !important;
border-top:transparent !important;
border-left:transparent !important;
border-right:transparent !important;
}

Quick question though, Is there a way to make the menu items have more space between each item?

Is there a way to make the menu items have more space between each item?

sure, put a left and right margin (margin: 0 20px on the <li...>

BTY you can condense your css by changing

ul.rMenu li a:hover {
background: transparent !important;
border-bottom:transparent !important;
border-top:transparent !important;
border-left:transparent !important;
border-right:transparent !important;
}

to

ul.rMenu li a:hover {
background: transparent !important;
border:transparent !important;
}

and ever combine the selectors since they are all applying the same rules so you would have

div#menu2,
div#menu2 ul.rMenu,
ul.rMenu li a:link, 
ul.rMenu li a:active,
ul.rMenu li a:visited, 
ul.rMenu li,
ul.rMenu li a:hover {
background: transparent !important;
border:transparent !important;
}