ekdor on "FireFox is not positioning drop down menus in the correct place"

I started work on a new site tonight and when testing my menu's I found that FireFox is not positioning drop down menu in the correct place; not with it's parent. Instead it is positioning it as if floated left. It is happening on all sites that I have created that use close variation of this menu CSS. I don't recall it happening in the past; But I haven't tested in FireFox recently so I don't know when it started.

Seems to work in every other browser I have tried. I cleared all browser data and update the browser also to version 28.0 for Mac. No change.

WP automatically updated in the last 24 hours to version 3.8.2.

I have checked for validation errors and it passed.

Tried many many tweaks and code removals to see if I could identify where this might be occurring but not got anywhere. Closest I got was position: relative; removing it cause all other browsers to behave the same. Is there an issue with firefox with this tag?

The URL is http://http://www.salubriouscheeses.com

My menu CSS for this site is:

/* Menu Container */
.menu-bar {
	background: url('images/menubar-bkgrnd.jpg') no-repeat;
	height: 64px;
	font-family: Tahoma, Verdana, Segoe, sans-serif;
	text-align: center;
	padding-top: 21px;
	margin-bottom: -21px;
	overflow: visible;
}

.menu-bar a {
	text-transform: capitalize;
	color: rgba(0,0,0,0.75);
	font-size: 18px;
	font-weight: normal;
	text-shadow: 0px 0px 4px rgba(0,0,0,0.4);
}

/* Highlighted Menu Entry
.current-menu-item a {
	padding: 14px 17px 10px 17px !important;
	background: #f0f;
}
 */

/* Menu Bar - Horizontal */
ul.dropdown {
	list-style: none;
	width: 100%;
}

ul.dropdown li {
	display: inline;
	position: relative;
}

ul.dropdown li:hover a {
	padding: 11px 10px 11px 10px !important;
}

ul.dropdown a {
	padding: 0px 10px 0px 10px;
}

ul.dropdown a:hover {
	color: rgba(0,0,0,0.75);
	background: linear-gradient(#ffffff 0%, rgba(255,255,255,0) 100%);
}

ul.dropdown li ul a {
	display: block;
	font-size: 110%;
	margin: 0px 0px 0px 0px !important;
}

/* Drop Down List - Virtical */

ul.dropdown ul {
	text-align: left;
	position: absolute;
	list-style: none;
	width: 250px;
	z-index: 500;
	margin: 0px 0px 0px 0px !important;
}

ul.dropdown li ul {
	background: url('images/menu-dropdown-bot.png') no-repeat bottom,
		url('images/menu-dropdown-top.jpg') no-repeat top,
		url('images/menu-dropdown-bkgrnd.png') repeat-y;
	margin: 9px 0px 0px 0px !important;

	box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.35);
	-moz-box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.35);
	-webkit-box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.35);
}

ul.dropdown ul ul {
	top: 0px;
	left: 100%;
}

ul.dropdown ul li {}

/* Drop Down - List items */
ul.dropdown li * a:hover {
	background: url('images/menu-dropdown-h.png') repeat-y;
	margin: 0px 0px 0px 0px !important;
	font-size: 110%;
}

/* Hide all the dropdowns (submenus) */
ul.dropdown ul, ul.dropdown li:hover ul ul, ul.dropdown ul li:hover ul ul { display: none; }

/* Display the submenus only when li are hovered */
ul.dropdown li:hover ul, ul.dropdown ul li:hover ul, ul.dropdown ul li ul li:hover ul { display: block; }

Normally I have this work hidden from public so will leave it open for you to look at for a while.

Cheers, Brook

[Moderator Note: Please ensure that you are embedding links correctly in your posts.]