slideToggle drop-down menu problems in IE8

slideToggle drop-down menu problems in IE8

I'm relatively new to jquery, so this might be a known issue or a simple fix, but I couldn't find any solution even after an intensive google search.

Let's cut right to the chase.

I have the following menu:

  1. <ul id="dropdown">
  2.       <li class="first">Item 1</li>
  3.       <li>Item 2</li>
  4.       <li>Item 3</li>
  5.       <li>Item 4</li>
  6.       ...
  7. </ul>
with the following css-styling applied to it

  1. ul#dropdown {
  2.       width:58px;
  3.       padding:2px 4px;
  4.       position:absolute;
  5.       min-height:36px;
  6. }

  8.       ul#dropdown li {
  9.             display:none;
  10.       }
  12.       ul#bdropdown li.first {
  13.             display:inline;
  14.       }
And I'm applying jquery to it as follows: 

  1. $('#dropdown').click(function() {
  2.       $('#dropdown li:not(.first)').slideToggle();
  3. });
This works fine in Firefox, Safari, Chrome and Opera, but in IE8 the dropdown menu doesn't display the second item (Item 2 in the code sample) when I click on it. The menu starts expanding downwards just as it should and for a moment I can get a glimpse of the second item, but shortly after it gets overlayed by the third item.

When I remove the :not(.first) from my jquery then all items show up as they should, with the exception that the first one disappears (logically).

Has anybody experienced something similar and can help me fix this? If there is a better way to code the whole menu generally than I'd be happy to do so as well, just let me know.