Need Help Wit CSS Animation - Urgent

programming web dev
1

Hi peope!
I need help with a bit of CSS…
Im working on a menu system and what I want to do is if you hover over “mmt_002” it has to animate and show “ms_002” below. - please note the div structure in my code below. The div “mm_sub” is the sub navigation container.

If I dump the “mm_sub” div under inside of the “mmt_002” list item then it works. but i dont want to do it like that.
Any help would be apreciated!

Regrads,
Reinhardt
**
the CSS ive used:

**

#ms_002 {    visibility: hidden;
}


#mmt_002:hover #mm_002 {
    visibility: visible;
}

**
Here is my HTML code:**

<div id="WrapperGlobal">  <div id="WrapperNavigation">
    <ul id="mm_tier_01" role="navigation">
      <li id="mmt_001"><a href="#">MENU OPT 1</a></li>
      <li id="mmt_002"><a href="#">MENU OPT 2</a></li>
    </ul>
    <div class="mm_sub" id="ms_002">
      <ul class="mm_tier_02" role="navigation">
        <li><a href="#">Sub Menu Opt 1</a></li>
        <li><a href="#">Sub Menu Opt 2</a></li>
      </ul>
    </div>
  </div>
</div>