Ошибка функциональности выпадающего меню CSS в IE7,8 и 9

Question

Ошибка функциональности выпадающего меню CSS в IE7,8 и 9

0

У меня есть раскрывающееся меню CSS, которое отлично работает в Mozilla/Chrome/Safari. Однако это немного, если IE10 (но работает), но не работает вообще в IE9.

Я попытался выяснить, что вызывает это, поскольку есть веб-сайты, которые используют раскрывающиеся меню CSS, которые отлично функционируют в IE.

См. Здесь скрипку: http://jsfiddle.net/xZuDC/

Изображения выглядят следующим образом:

Нормальное меню в хроме
Меню в IE

Список:

<ul class="ulrRight">
    <li><a onclick="your_name">Your Account</a>
        <ul id="your_name">
            <li><a href="/index.php?f=mydetails">Details</a></li>
            <li><a href="/index.php?f=mypassword">Password</a></li>
        </ul>
    </li>
</ul>

J Spring 03 окт. 2013, в 20:37

Источник

1

Вы скрипку отображается только по умолчанию ul , вы , возможно, кое - что забыли.
Josh Powell 03 окт. 2013, в 18:03
0

<!DOCTYPE html> пожалуйста, объявили тип документа
user2092317 03 окт. 2013, в 18:06
0

Был синтаксис в скрипке. Вот обновленный. Поскольку текст белый, я также добавил темный фон в контейнер меню.
matewka 03 окт. 2013, в 18:06
0

Thats @matewka - но он все еще не работает в IE. Просто список, как на фотографии выше
J Spring 03 окт. 2013, в 18:09
0

@JSpring Я знаю это. Я просто хотел сделать скрипку более читаемой и полезной.
matewka 03 окт. 2013, в 18:10
0

@matewka ваша скрипка отлично работает на IE8 ..
vishalkin 03 окт. 2013, в 18:17

Показать ещё 4 комментария

Теги:

html

css

internet-explorer

cross-browser

1 ответ

Ещё вопросы

Вы скрипку отображается только по умолчанию ul , вы , возможно, кое - что забыли.
<!DOCTYPE html> пожалуйста, объявили тип документа
Был синтаксис в скрипке. Вот обновленный. Поскольку текст белый, я также добавил темный фон в контейнер меню.
Thats @matewka - но он все еще не работает в IE. Просто список, как на фотографии выше
@JSpring Я знаю это. Я просто хотел сделать скрипку более читаемой и полезной.
@matewka ваша скрипка отлично работает на IE8 ..

Josh Powell · Answer 1 · 2013-10-03T16-05-00.000Z

Я сделал несколько изменений, и, насколько я могу судить, он работает в IE9.

Это единственное, что я нашел, чтобы заставить скрипку не работать, <ul class="ulrRight"> <--- имел дополнительный r после ul

jsfiddle, похоже, не работает в IE 8 и ниже, по крайней мере, в режиме просмотра в консоли.

Вот скрипка с обновлениями, которые я сделал

играть на скрипке

Я бы предложил просто написать это немного чище:

<div class="dropDown">
  <ul>
      <li>Your Account
          <ul>
             <li>Details</li>
              <li>Password</li>
          </ul> 
      </li>
      <li>Help
          <ul>
              <li>Support</li>
              <li>Contact Us</li>
              <li>Client FAQ's</li>
              <li>Haulier FAQ's</li>
          </ul>            
      </li>
      <li>Logout</li>
  </ul>
</div>

CSS

.dropDown {
  width: 500px;
  height: 60px;
  margin: 0 auto;
  background: mediumSeaGreen;
}

.dropDown > ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.dropDown > ul > li {
  float: left;
  width: 33.3333%;
  line-height: 60px;
  text-align: center;
}

.dropDown > ul > li:hover {
  background: #1b1b1b;
  color: #fff;
}

.dropDown > ul > li:hover > ul {
  display: block;
}

.dropDown > ul > li > ul {
  display: none;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

скрипка для кода

К сожалению, он не работает в IE 9, когда я использую его на веб-сайте, хотя он работает через jsFiddle. Это выглядит примерно так же, как фотография, которую я прикрепил в моем первом посте, но не так, как дополнено :(