Блог

Главная - Вопросы по программированию - Неупорядоченный список отображается неправильно, используются MooTools и UvumiTools выпадающий плагин

Неупорядоченный список отображается неправильно, используются MooTools и UvumiTools выпадающий плагин

#javascript #html #css #mootools

#javascript #HTML #css #mootools

Вопрос:

Я использую MooTools плагин UvumiTools выпадающий для оформления выпадающего меню на моем веб-сайте. Плагин берет неупорядоченный список и отображает его горизонтально без маркеров, а затем помещает под ним горизонтальное правило. Каждый элемент списка может быть перенесен, и если внутри него есть другой ul, то это отображается в виде подменю, как показано ниже.

 <code>
<ul>
  <li>Menu A</li>
    <ul>
        <li>Menu A - Option 1</li>
        <li>Menu A - Option 2</li>
    </ul>
  <li>Menu B</li>
</code>

Каждый тег li в выпадающем меню является div, который также использует background-image и background-position для создания эффекта переноса, показанного ниже.

 <code>
<ul>
    <li><div id="optionOne"><a href="#">Menu A</a></li>
<ul>
</code>

Сайт отображается и функционирует на 100% корректно в Firefox, переходы на параметры верхнего уровня и выпадающее меню отображаются под горизонтальным правилом, но, к сожалению, это, похоже, единственный браузер, и Chrome, и Safari перемещают список, что нарушает все это.

Firefox: http://img560.imageshack.us/img560/7139/screenshot20110425at130.png

Chrome: http://img835.imageshack.us/img835/8375/screenshot20110425at129.png

У кого-нибудь есть идеи, что я делаю не так? Я впервые использую этот плагин.

Комментарии:

1. Я могу связать вас с реальной страницей, если хотите, я не смог заставить jsfiddle работать. blacksciencesoftware.com/Design2011 Важные URL-адреса, на которые ссылаются, являются основным CSS для страницы blacksciencesoftware.com/Design2011/css/design2011.css и CSS для выпадающих меню blacksciencesoftware.com/Design2011/css/uvumi-dropdown.css Файлы js для выпадающего списка не изменены по сравнению с их исходными состояниями. Достаточно интересно, что если вы увеличиваете и уменьшаете масштаб в любом браузере, который отображает его неправильно, все это отображается в правильном месте (Firefox, Safari, в OS X)

Ответ №1:

Я не уверен, почему, но WebKit (т. Е. Safari и Chrome) не нравится ваше max-width:93px from .softwareLink a . Иногда я вижу странное перенос в Chrome / Safari, а иногда нет, возможно, где-то в движке верстки есть обратная связь, основанная на времени.

Использование width:93px в .softwareLink a должно работать стабильно (и сделать все пункты вашего меню одинакового размера). Вам придется изменить вашу таблицу спрайтов, чтобы она была вертикальной, а не горизонтальной, иначе из-за этого правая сторона ваших ссылок немного уменьшится.

Кстати, я также вижу ошибку JavaScript:

Ошибка типа: результат выражения ‘E.create’ [undefined] не является функцией.
/Design2011/js/mootools-for-dropdown.js:173