I am having a glitch with my main menu in DNN 5 using the NAV menu. here is my current CSS

/*--------- dnn menu style ----------*/
/* main menu td */
.mainMenu
{
 cursor:pointer;
 font-size: 14px;
 background-color:transparent;
 width:100%;
}

/* Main Menu Normal */
.mainMenu .root
{ 
 color: #E9E9E9;
 font-size: 15px;
 font-weight:bold;  
 text-align:center;
 padding:11px 11px 11px 11px;
 text-transform:uppercase; margin-right:1px;
 white-space:nowrap;
 line-height:40px;
 background:url(../images/button.png) repeat-x center center;
}

/* Main menu hover */
.mainMenu .hov{
 color: #461813;
 background:url(../images/button_active.png) repeat-x center center;
}

/* Main menu selected */
.mainMenu .sel, .mainMenu .bc {
color:#461813;
 background:url(../images/button_active.png) repeat-x center center;
}
.mainMenu table{
 border:1px solid #C0D6E5;
 z-index: 5000;
 }

/* SUB Menu Normal */
.mainMenu tr.mi{
 background-color:#F8FAFF;
 z-index: 1000;
 font-size: 18px;
 font-weight:bold;
 text-align:left;
 color:#375162;
 line-height:25px;
 text-transform:none;
}
.mainMenu tr.mi td{
padding: 0 2px;
text-transform:none;
}

/* SUB Menu hover & selected */
.mainMenu tr.hov {
background: #CE0D0D url(../images/button.jpg) repeat-x center center;
}

.mainMenu tr.hov td{
color:#461813;
}

.mainMenu tr.sel, .mainMenu tr.bc{
background: #CE0D0D url(../images/button.jpg) repeat-x center center;
}

.mainMenu tr.sel td, .mainMenu tr.bc td{
 color:#461813;
}

.main_dnnmenu_break{
 height: 2px;
 background-color: #D5E0FF;
}

/* Module Action Menus */
.ModuleTitle_SubMenu
{
 border:1px solid #C0D6E5;
}

.ModuleTitle_SubMenu td{
 background-color:#F8FAFF;
 white-space: nowrap;
}

.ModuleTitle_MenuIcon {
 background-color:#F8FAFF;
 border:none;
 padding: 0px 2px;
}

.ModuleTitle_MenuItemSel td, .ModuleTitle_MenuItemSel .ModuleTitle_MenuIcon{
 background: #CE0D0D url(../images/button.jpg) repeat-x center center;
 color: #461813;
}

.ModuleTitle_MenuBreak td, .ModuleTitle_MenuBreak .ModuleTitle_MenuIcon
{
 height: 2px;
 background-color: #D5E0FF;
}

the issue I am having is that I want the main menu to display in one line without wrapping and making the rest of the menu item forced under the other menu items. I managed to get this to work. however when i mouse over items that have a drop down menu under certain items, the whole menu freaks out and goes crazy making random menu items show up under the first 3 or 4 menu items and the menu flickers.


Here are some images of what I am talking about.

Internet Explorer Glitch





Yet it works flawlessly on Google Chrome.



Unfortunately the people I am making this site for only want to use crappy internet explorer. does anyone have any suggestions as to what i can do to fix this?