Unordered List Displays Incorrectly, MooTools and UvumiTools Dropdown Plugin Being Used

Question

I'm using MooTools plugin UvumiTools DropDown to style a dropdown menu on my website. The plugin takes an unordered list and displays it horizontally with no bullet points, and then puts a horizontal rule underneath. Each list item can be rolled over, and if it has another ul inside it, then that is rendered as a sub-menu, as displayed below.

<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>

Each li tag in the dropdown menu is a div that also uses background-image and background-position to have a rollover effect, shown below.

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

The site displays and functions 100% correctly in Firefox, rollovers on the top-level options, and the drop-down menu being displayed below the horizontal rule, but unfortunately that appears to be the only browser, both Chrome and Safari stagger the list which breaks the whole thing.

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

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

Anybody have any ideas what I'm doing wrong? This is the first time I've used this plugin.

Answer 1

I'm not sure why but WebKit (ie Safari and Chrome) doesn't like your max-width:93px from .softwareLink a . Sometimes I see the odd wrapping in Chrome/Safari and sometimes I don't, maybe there is some timing based feedback somewhere in the layout engine.

Using width:93px in .softwareLink a should work consistently (and make your menu items all the same size). You'll have to make change your spritesheet to be vertical rather than horizontal or it will bleed out the right side of your links a bit.

BTW, I'm also seeing a JavaScript error:

TypeError: Result of expression 'E.create' [undefined] is not a function.
/Design2011/js/mootools-for-dropdown.js:173