Может ли кто-нибудь еще помочь? Я читал множество разных вопросов о выпадающих меню в IE, и все они совершенно разные. Поэтому у меня нет оснований для моего.Выпадающее меню CSS не работает в IE9 и ниже
Я попытался удалить все дочерние селекторы и значения rgba, и в основном разделил как можно больше CSS3.
У меня возникли проблемы с попыткой получить раскрывающееся меню CSS для работы в IE9 и ниже.
Chrome, Firefox и IE 10+ отображают это меню правильно. Это простое, наведение и отображение подменю. В IE9 и ниже выпадающие списки просто не отображаются.
Я читал об удалении -filter и -ms-filter, а также z-index и всех видах, ни один из моих CSS не имеет ничего подобного.
ОБНОВЛЕНО CSS:
nav {width:100%;margin:0 auto;text-transform:uppercase;position:relative;}
#toggleMenu {display:none;font-size:40px;line-height:40px;}
ul.mainmenu { margin: 0; padding: 0; position:relative;}
ul.mainmenu .small {font-size:9pt;}
ul.mainmenu ul { left: -9999em; position: absolute; width:200px; background: #222; margin: 0; padding: 0; top: 40px;}
ul.mainmenu li.item-173 ul {width:310px;}
ul.mainmenu li.item-118 {text-transform:none;}
ul.mainmenu ul ul { background: #333; }
ul.mainmenu li { display: inline-block; vertical-align: middle; position: relative; }
ul.mainmenu li a, ul.mainmenu li span.nav-header { display: inline-block; vertical-align: middle; padding: 8px 6px; width:100px; color: #ddd;font-size:10pt; font-weight:normal; line-height:18pt;}
ul.mainmenu ul.nav-child li a {width:200px;}
ul.mainmenu ul.nav-child li a.vehicles {width:300px;}
ul.mainmenu li span.nav-header {cursor:default;}
ul.mainmenu li a:hover,
ul.mainmenu li:hover a,
ul.mainmenu li:hover span { background: #222; }
ul.mainmenu li:hover ul, ul.mainmenu li.focus ul { top: 40px; left: 0;}
ul.mainmenu li ul li:hover ul { top: 40px; left: 300px; }
ul.mainmenu ul li { display: block; padding: 0; }
ul.mainmenu ul li a { display: block; padding: 10px 15px; color:#999; }
ul.mainmenu ul li a.vehicles {text-align:left; padding:20px 15px;}
ul.mainmenu ul li a.vehicles img {float:left;margin-right:10px;}
ul.mainmenu ul li a.vehicles .image-title-description {text- transform:none;display:block;color:#666;}
ul.mainmenu ul li a:hover,
ul.mainmenu ul li:hover a .image-title-description { background: #333; color:#fff; text- decoration: none; }
ul.mainmenu ul ul li a:hover { background: #ccc; }
UPDATE:
Я добавил линию HTML5Shiv в голову, чтобы попытаться получить его работу в IE, но он не сделал выпадающие работать, хотя он немного изменил макет в IE8.
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/r29/html5.min.js"></script>
<![endif]-->
UPDATE:
Я действительно не понимаю этого, как представляется, ничего не работает. В IE9 нет никакой разницы, независимо от того, что я пробую. Я сделал все, что упоминается здесь, в http://alistapart.com/article/hybrid, а IE9 ничего не показывает. Верхний уровень меню отображается отлично, но выпадающие списки просто не отображаются.
Я думаю, что я пришел к выводу, что IE8 и ниже не будут отображать :hover на все, что не является тегом a. Это абсолютная 100% уверенность?
У вас есть HTML5 shiv? Потому что без него элемент 'nav' не будет работать. Если вы этого не сделаете, это дубликат [this] (http://stackoverflow.com/questions/5227331/html5-new-elements-header-nav-footer-not-working-in-ie) в немного отличающемся контекст. – DavidT
Нет, я этого не делаю, я только что прочитал об этом в Википедии. Я попытаюсь добавить это в 'head' – Lee
, добавив строку в Википедию, не дает никакой другой операции в навигационном меню, выпадающие списки все еще не отображаются. Я что-то пропустил в своем CSS? – Lee