How to keep the hover for Parent menu and set the selected menu item css for child menu item?

Question

User-1039184385 posted

Hi,

I'm using cssfriendly control adapter for menu. My asp.net menu control's datasource is a sitemap file I'm using which contains all the urls.

I have the following questions:

1. Is there a way to keep the parent menu item hovered while hovering over the respective child menu items?
2. Is there a way to keep the child menu item selected? I am able to set the css for the parent menu, however I was wondering if the same is possible with the child items.

Please help!

Thanks,

Moneka

Answer 1

User-861155893 posted

keeping the parent highlighted is just a case of making sure your elements in your XHTML reside within each other so:

<ul>
<li>somethign</li>
<li>parent
<ul>
<li>child</li>
</ul>
</li>
</ul>

therfore hovers in children will 'bubble up' to the parent li and you should still be able to do li:hover

Answer 2

User1176561268 posted

Hello,

As you want that when mouse hover effect occures then if that menu containes submenu that should be arised so you can apply following code and in the same way i have written the technique to use in coments and try it may it can help you

<tr>

<td>

<ul id="nav"> <!--this nav is a id which would writen in CSS file -->

<li><a href="#">something</a></li>

<li><a href="#">something2</a>

<ul>

   <li><a href="#"></a>something21</li>

   <li><a href="#"></a>something22</li>

</ul>

</li>

</ul>

<td>

<tr>

CSS file code:

#nave

{ <!-- write your style which u wnt to apply here --> }

#nave li:hover

{ <!-- write your style which u wnt to apply here --> }

#nave li ul :hover

{ <!-- write your style which u wnt to apply here --> }

  So, like this way you can get what you want actually.

                     ---- PLEASE MARK AS ANSWER IF IT SOLVES YOUR QUERY ----

Answer 3

User-1039184385 posted

Thanks guys for your suggestions...I should mention a few more things. I am using web.sitemap file to bind the asp:menu control with the sitemapdatasource control. I am also, as mentioned previously, using cssfriendly adapters for the menu so it is generating an ul. The CSS classes are generated dynamically, I'm not sure if I have any control as to what classes are used; I am overwriting the ones I am aware of. However, when it comes to finding the exact sub-menu selected, all the leaf's seem to have the same classes - (see below)

//Parent

<li class="AspNet-Menu-WithChildren  AspNet-Menu-Selected">
				<a href="~/parent.aspx" class="AspNet-Menu-Link  AspNet-Menu-Selected" title="Parent">

//Child 1 & 2
<li class="AspNet-Menu-WithChildren  AspNet-Menu-Selected">
<a href="~/child1.aspx" class="AspNet-Menu-Link  AspNet-Menu-ParentSelected" title="Child 1">

<li class="AspNet-Menu-WithChildren  AspNet-Menu-Selected">
<a href="~/child2.aspx" class="AspNet-Menu-Link  AspNet-Menu-ParentSelected" title="Child 2">

Now as you can see, the Asp-Menu-Selected is used for both child when it could be that the child1.aspx page may be the selected page. Is it possible? Please help! Thanks!