Menus' hover style's Rendering depends on the sequence of the css

As using "asp:Menu" control, the hover style for sub-menus is really very useful for making a good using experience.

But at first it makes me crazy,. I use the following codes:

<asp:Menu ...>

<DynamicHoverStyle CssClass="dhs">

...

<LevelMenuItemStyles>

     <asp:MenuItemStyle CssClass="FirstLevelMenu" />

     <asp:MenuItemStyle CssClass="SecondLevelMenu" />

    <asp:MenuItemStyle CssClass="ThirdLevelMenu" />

</LevelMenuItemStyles>

</asp:Menu>

The css content:

.FirstLevelMenu{..}

.SecondLevelMenu{..}

.dhs{ background-color:gray;}

.ThirdLevelMenu{...}

But the "dhs" style never  works on the third level menus.

Solution is changing the sequence of the style class "dhs" and "ThirdLevelMenu“：

.FirstLevelMenu{..}

.SecondLevelMenu{..}

.ThirdLevelMenu{...}

.dhs{ background-color:gray;}