The only problem with this is that the roll over target area is the menu items label.  If you change the padding the size of the target area increases but so does the border.  I would like to know how to have the target area covering the full height of the menu but the border being constrained in height.

Anyhow I found that this works for a horizontal menu

   <dnn:NAV runat="server" id="dnnNAV" ProviderName="DNNMenuNavigationProvider" CSSControl="main_dnnmenu_bar" CSSContainerRoot="main_dnnmenu_container" CSSNode="main_dnnmenu_item" CSSNodeRoot="main_dnnmenu_rootitem" CSSIcon="main_dnnmenu_icon" CSSContainerSub="main_dnnmenu_submenu" CSSBreak="main_dnnmenu_break" CSSNodeHover="main_dnnmenu_itemhover" indicateChildren="false" SeparatorHTML="<img class=&quot;Sep&quot; alt=&quot;*&quot; BORDER=&quot;0&quot; src=&quot;separator.gif&quot;/>"
/>

  and the CSS is

.Sep{
height:15px;
width:2px;
vertical-align:middle;
margin-right:15px;
}

 I'm having a slightly different issue with the separator graphic. Only in Internet Explorer, the first menu item is appearing about 2px or 3px higher than the rest of the menu items. Also with every browser I've tested with the menu items are slightly off vertical centering whenever I use a separator graphic and only when I use a separator graphic.

Here is the code for the my menu:

Here is the menu code in the css file:

/* Nav Menu - using DNN Menu for DotNetNuke 3.3 & 4.3 */

.main_dnnmenu_bar {cursor:auto;height:28px;line-height:25px;background-color:Transparent;}

.main_dnnmenu_rootitem {color:#666666;font-size:10pt;font-weight:bold;font-family:Helvetica, Arial, Sans-Serif;white-space:nowrap;padding:0 0 0 0;height:28px;vertical-align:middle;}

.main_dnnmenu_separator{padding:0px 8px 0px 8px;vertical-align:middle;}

.main_dnnmenu_icon {cursor:auto;text-align:center;width:3px;height:25px; }

.main_dnnmenu_break {height:22px;font-size:1px; }

.main_dnnmenu_arrow {border-right:#A2A0AE 1px solid;font-family:webdings;font-size:10pt;cursor:auto;}

.main_dnnmenu_rootmenuarrow {font-family:Webdings, Sans-Serif;font-size:10pt;cursor:auto;}

.StyleIconBackColor {background-color: transparent;}

/* for customised menu colours */

.main_dnnmenu_container {background-color:transparent; width:auto; }

.main_dnnmenu_itemhoverroot td{color:#D85A0E; background-color:Transparent;}

.main_dnnmenu_itemhoverroot{color:#D85A0E;background-color:Transparent;}

.main_dnnmenu_itemselectedroot td{color:#D85A0E;background-color:Transparent;}

.main_dnnmenu_itemselectedroot{color:#D85A0E;background-color:Transparent;}

.main_dnnmenu_item  {cursor:auto;color:#FFFFFF;font-size:9pt;font-weight:bold;background-color:Transparent;font-family:Helvetica, Arial, Sans-Serif;white-space:nowrap;height:25px;}

.main_dnnmenu_itemhover { color:#154880; background-color:#A8D3FF; height:25px; }

.main_dnnmenu_itemhover td { color:#154880; background-color:#A8D3FF; }

/* changing padding here to give more space on sub menu text - check browsers for behaviour */

.main_dnnmenu_submenu { background-color:#154880; z-index:1000; cursor:auto; filter:progid:DXImageTransform.Microsoft.Shadow(color='#696969', Direction=135, Strength=3); padding:2px 3px;} 

Another issue to bring up is that the separatorHTML tag inherits the CSS style from Root Menu Items causing hyperlinked separators. Anybody know how to remove all the hyperlinks on all the separators?