Broken Menu in IE

[Airslash]

Hello,

I'm currently rewriting an entire CMS into Ruby on Rails, but I have an isue with the CSS and generating the dropdown menu in HTML. Perhaps this is not entirely the correct forum as the syntax is different, but you should get the picture.

here is the code

HTMl - HAML

#menu
      %ul
        %li
          = link_to 'Category Management', '#', :class => "MenuBarItemSubmenu"
          %ul
            %li
              = link_to 'Manage Categories', '/admin/category/list/'
            %li
              = link_to 'Manage Sets', '/admin/set/'
        %li
          = link_to 'Item Management', '#', :class => "MenuBarItemSubmenu"
          %ul
            %li
              = link_to 'Manage Items', '/admin/product/list/'
            %li
              = link_to 'Manage Prices', '/admin/product/price_formula/'
        %li
          = link_to 'Event Management', '#', :class => "MenuBarItemSubmenu"
          %ul
            %li
              = link_to 'Manage Discout Events', '/admin/event/list/'
            %li
              = link_to 'Manage Subscription Event', '/admin/subscription_event'
            %li
              = link_to 'Manage Auction Event', '/admin/auctionevent'
        %li
          = link_to 'Module Management', '#', :class => "MenuBarItemSubmenu"
          %ul
            %li
              = link_to 'Manage User Modules', '/admin/module/list/'
            %li
              = link_to 'Manage Fixed Modules', '/admin/module/predefine_module'
        %li
          = link_to 'Content Management', '#', :class => "MenuBarItemSubmenu"
          %ul
            %li
              = link_to 'Manage Images', '/admin/image/list/'
            %li
              = link_to 'Manage Image Sizes', '/admin/image/set_size'
            %li
              = link_to 'Manage Checkout', '/admin/event/toggleCheckout'
        %li
          = link_to 'Reports Management', '#', :class => "MenuBarItemSubmenu"
          %ul
            %li
              = link_to 'Sales Reports', '/admin/report/sale_report'
            %li
              = link_to 'Set Sales Report', '/admin/report/setsale_report'
            %li
              = link_to 'Active Items Report', '/admin/report/active_report'
            %li
              = link_to 'Active Sets Report', '/admin/report/setactive_report'
            %li
              = link_to 'Auction Report', '/admin/report/auction_report'
            %li
              = link_to 'User Statistics Report', '/admin/report/user_statistics_report'
        %li
          = link_to 'Purchase Management', '#', :class => "MenuBarItemSubmenu"
          %ul
            %li
              = link_to 'Purchase History', '/admin/history'
            %li
              = link_to 'Subscription', '/admin/subscription/list'
        %li
          = link_to 'User Management', '#', :class => "MenuBarItemSubmenu"
          %ul
            %li
              = link_to 'Manage Users', '/admin/user'
            %li
              = link_to 'Change Password', '/admin/user/changepassword'
 

CSS - SASS

#menu
  :background #88B966
  :border-bottom 1px solid #FFFFFF
  :height 25px
  :width auto
  ul
    :background-color #88B966
    :font-size 100%
    :list-style-type none
    :margin 0px
    :padding 0px
    :width auto
    :z-index 1000
    li
      :cursor pointer
      :display inline
      :float left
      :font-size 100%
      :list-style-type none
      :margin 0px
      :padding 0px
      :position relative
      :width 150px
      a
        :background-color #88B966
        :border-right solid 1px #FFFFFF
        :color #FFFFFF
        :cursor pointer
        :display block
        :margin 0px
        :padding 0.5em 0.75em
        :text-decoration none
        &:hover
          :background-color #68B4C8
      &:hover ul,li
        :display block
      ul
        :border solid 1px #CCCCCC
        :cursor default
        :display none
        :font-size 100%
        :list-style-type none
        :margin 0px
        :padding 0px
        :position absolute
        :width 13.8em
        &:hover
          :display block
        li
          :cursor pointer
          :float left
          :font-size 100%
          :list-style-type none
          :margin 0px
          :padding 0px
          :position relative
          :text-align left
          a
            :background-color #88B966
            :border none
            :display block
            :font-size 10px
            :font-weight normal
            :margin-left -1px
            :text-align left
            :text-decoration none
 

The code works perfectly in FF and I'm able to select all the menus and submenus in the dropdown.
However in IE the menu appears if I hover over the top linksm but dissapears as soon as I move my mouse to the second child menu or out of the links.

[Airslash]

solved it....

added position: relative and z-index 20000 to the top wrapper div element for IE only