Show is using a transparent background instead of color I spesified.

Show is using a transparent background instead of color I spesified.

I have a fairly standard menu, consisting of an unnumbered list. On mouseover on the first level of the menu, I want to show the second level, preferably using a nice animation.

My first though was to use jquery.ui.show like this:
$(this).find("ul.subnav").first().show('blind', '', 600);

This works, but for some reason the animation sets the bakground to transparent so that the "dropdown" has white text on white background until the animation is done. At the end of the animation, the background is set to dark gray.

My nest test was with the following functions:
$(this).find("ul.subnav").first().slideDown(600);
$(this).find("ul.subnav").first().show(600);

Again, this works, and the animation is actually not bad, except for the fact that only the first menu item is displayed until the animation is done.

The html is as follows:

  1. <ul class="categoryNav>
  2.       <li>
  3.             <a href="#">lvl1</a>
  4.             <ul class="subnav">
  5.                   <li>
  6.                         <a href="#">sub1</a>
  7.                          <ul class="subnav">
  8.                                <li>
  9.                                     <a href="#">sub1</a>
  10.                                 </li>
  11.                               <li>
  12.                                     <a href="#">sub2</a>
  13.                                 </li>
  14.                               <li>
  15.                                     <a href="#">sub3</a>
  16.                                 </li>
  17.                           </ul>
  18.                   <li>
  19.                         <a href="#">sub2</a>
  20.                    </li>
  21.                   <li>
  22.                         <a href="#">sub3</a>
  23.                    </li>
  24.              </ul>
  25.       </li>
  26. </ul>















    • Topic Participants

    • hp