Main Navigation Sub-Menu – Pushed to left on IE?

Something is wrong with your css but since we can’t see it we can’t help.

Do I need to post the CSS? I thought you could view it with Dev Tools.

Here’s what I have menu wise:

nav{position:relative;margin-top:10px;background-color:#FFD200;background-image:url(images/nav-bg.png);background-repeat:repeat-x;clear:both}
nav ul.menu{padding-left:0px;}
nav .parent > a, nav .parent > a:hover{background-image:url(images/arrow.png);background-position:right;background-repeat:no-repeat}
nav ul ul .parent > a, nav ul ul .parent:hover > a:hover, nav ul ul li:hover ul .parent > a, nav ul ul li:hover ul .parent > a:hover{background-image:url(images/arrow-right.png);background-position:right;background-repeat:no-repeat}
nav ul, nav ul li{display:inline;}
nav ul li a{display:inline-block;font-family: Futura Light, Futura-Medium, "Futura Medium", "Century Gothic", CenturyGothic, "Apple Gothic", AppleGothic, "URW Gothic L", "Avant Garde", sans-serif;font-size:17px;font-weight:normal;color:#000000;line-height:37px;text-decoration:none;padding:0 15px;}
nav ul.menu li a{width:100px}
nav ul li a:hover{color:#000000;text-decoration:none;background:#FFE693;}
nav .current-menu-item a, nav .current_page_item a{background:#FFE693;}
nav .current-menu-item .sub-menu a, nav .current_page_item .children a{background:#FFE693;}
nav ul > li:first-child a:hover{color:#000000;}
nav .sub-menu li a, nav .children li a{border:thin solid #7aa6d0;border-radius:0 !important}
nav li .sub-menu{margin-left:0;}
nav ul li{position:relative;}
nav li ul{display:none;position:absolute;top:auto;left:auto;}
nav li ul a{background:#FFE693;}
nav ul ul li:hover ul, nav ul ul ul li:hover ul{top:-2px;margin-left:192px}
nav ul li:hover ul{display:inline-block}
nav ul ul, nav ul li:hover ul ul, nav ul ul li:hover ul ul{display:none}
nav ul li:hover ul, nav ul ul li:hover ul, nav ul ul ul li:hover ul{display:block;z-index:2147483647}
nav ul li:hover ul li a, nav ul ul li:hover ul li a, nav ul ul ul li:hover ul li a{font-size:13px;line-height:30px;width:165px;padding:0 14px;margin:-1px 0 0;opacity:1.0}
nav ul li:hover ul li a{}
nav ul ul li:hover ul li a{}
nav ul ul ul li:hover ul li a{}
nav ul li:hover ul li a:hover, nav ul ul li:hover ul li a:hover, nav ul ul ul li:hover ul li a:hover{background:#FFD220;}

Yes dev tools will work on the page in the browser. Your first page is a site lock down.

So why don’t you use dev tools?

I have used Dev tools and tinkered with the CSS many times over. I of course have access to the style sheets. I’m not sure what the issue is in IE that’s causing the 2nd level nav menu to be all the way on the left.

The pass is BN123 to get past the lock down.

Thanks!

Just wanted to follow up on this. I can’t seem to figure out why the navigation sub-menu is pushed all the way left in IE but drops down correctly under each parent menu on all other browsers.

Here’s the CSS for the navigation menu. Still at a lost here. : (

[no need to post CSS here – it’s all visible on your site]

What version of IE are you talking about?

Have you checked for mark-up and CSS errors that may be causing problems – IE is particularly finicky about invalid code.

Version 9 and 10 so the latest ones.

I haven’t checked for mark-up and CSS errors and I’m not sure how to. I’ve had no problems building other WP sites on various themes. This is a rather simple site … I’m not sure what the problem is.

There seems to be a DOCTYPE problem:

https://validator.w3.org/check?uri=http%3A%2F%2Fbrightnutritioninc.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

Not sure if that’s the problem.

Do you have the same problem if you switch to a default theme?

I did a live-preview on twenty twelve and thirteen. The drop down menu dropped underneath the parent as it should! So I guess that’s a good sign!

I don’t know what to do to fix a DOCTYPE problem.

Okay it’s fixed now! I had posted on the official theme board and here’s what was changed:

Update:

nav li ul{display:none;position:absolute;top:auto;left:auto;}

to:

nav li ul{display:none;position:absolute;top:auto;left:0;}

That’s it! Out of all the complex changes and fixes I’ve made .. something so simple had me stuck for over 2 weeks! The joys of web development! : )