Кажется, у меня странная проблема с IE7.
Если вы перейдете по следующему URL-адресу, http://tinyurl.com/3qrbhn4, и наведите курсор на основную навигацию вверху, прямо над изображением заголовка вВ Chrome, Firefox и IE8 вспомогательная навигация, отображаемая при наведении курсора на элемент навигации (например, при наведении указателя мыши на собрания), корректно совпадает с родительским LI.Однако, если вы попытаетесь навести курсор на главную навигационную панель в IE7, subnav отобразится на один пиксель.
Если вы осмотрите вложенный UL, то есть #mainNav ul ul, вы заметите, что он расположен абсолютно внутриродительского UL с левым значением 0. 0. 1007 *
Если я укажу левое значение left: 1px, оно корректно выравнивается в IE7, но ломается в Chrome / FF / IE8.
Я не уверен, почему это происходит, и у меня в настоящее время родительский UL (#mainNav ul) расположен относительно, поэтому я не уверен, почему будет разница в том, как IE7 отображает UL субнава.,Я знаю, что могу «исправить» это с помощью взлома IE и просто заставить IE7 отображать subnav ul с левым значением 1px, но я бы хотел избежать этого маршрута, если это возможно.
Может кто-нибудь помочь?Пожалуйста, дайте мне знать, если я предоставил достаточно информации!Я перечисляю CSS для рассматриваемых навигационных элементов:
/* NAVIGATION *********************************************************************************************** */
#mainNav { position: relative; width: 951px; margin: 0 auto; padding: 15px 0; z-index: 3; }
#mainNav ul { line-height: 100%; height: 35px; margin: 0; padding: 0; font-size: 20px; width: 951px; }
#mainNav ul li { line-height: 100%; list-style: none; float: left; text-transform: uppercase; height: 100%; position: relative; display: block; }
#mainNav ul li a { line-height: 0; height: 22px; border: 1px solid transparent; text-decoration: none; padding: 7px 15px 5px; position:relative; display: block; }
#mainNav ul li a:hover { }
#mainNav ul li.hover a { }
#mainNav ul li a.current { }
#mainNav ul li.lastItem { }
#mainNav ul ul { display: none; z-index:2; position: absolute; top: 35px; left: 0px; padding: 5px 0 10px; width: 200px; height: auto; -moz-box-shadow: 3px 3px 3px #444; -moz-box-shadow: 3px 3px 3px rgba(0,0,0,0.5); -webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0.5); }
#mainNav ul li.current ul { left: 1px; }
#mainNav ul li.hover ul li { background-position: 10px 8px; background-repeat: no-repeat; }
#mainNav ul li.hover ul li.hover { background-color: #baceda; background-position: 10px -20px; }
#mainNav ul li ul li { float: none; }
#mainNav ul li ul li a { background: none; line-height: 1; font-size: 15px; padding: 3px 30px 0; }
#mainNav ul li ul li.hover a { }
#mainNav ul li ul li a.current { }