Home/ Questions/Q 7856911
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-02T20:51:42+00:00

My question: How to create an on hover effect with for my ASP.net menu.

  • 0

My question: How to create an on hover effect with for my ASP.net menu.
The problem is that since the standard ASP.net menu doesnt have an on hover function, its quite hard/impossible(?) to create.

After doing my homework i saw some people who tried it with css, jquery and other methods… but i would prefer ‘normal’ html or css without incredibly complicated solutions.
Should that really be impossible, is there any clear way how to use it?

Most of the css options failed, or were incredibly complicated.

What exactly should happen:
A menu item for example

<asp:MenuItem NavigateUrl="~/Pages/Test.aspx" Text="Test" Value="Test" Selectable="true"></asp:MenuItem>

Should get a different background because of on hover effect.

Maybe changing the CSS from within the C# code into something else?

Thanks for your answer!

~Solved~
Thank you very much for your help! The problem is solved thanks to both of the answers.
I tried inplementing that menu, when i noticed that in this menu the hover effect also didnt work. What was the problem? I use 2 css files. And because the first css file contained some instruction as to how to handle the a:hover, all of the other hover effects were ignored.

Now that i know why the hover effect wasnt working, i can solve this problem. Thank you both very much!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Alright guys, it took me quite some time to figure out how to create the on hover effect with the ASP.net menu. So, i found an easy way, without all the hard stuff or lots of code.

    If you look at your asp page in your browser, go to page source. When you look at your menu, you will notice that it looks like this: 

    <li>
    <a class="level1" href="Home.aspx">
    <img src="../Images/home.png" alt="" title="" class="icon" />Home</a></li>
<li>
    <a class="level1" href="Page2.aspx">
    <img src="../Images/homehover.png" alt="" title="" class="icon" />Page2</a><ul class="level2">

    The solution would be to change your css:

    a:hover[href*="Home"][class*="level1"]
{
     color: black;
}

    This piece of CSS selects the A element, where (in the HTML) the attributes href and class contain(or are equal to) Home and level1.

    It might be a bit different if you have a more complex menu then i do, for i have just 2 levels deep. (menu and submenu)
    Hope it helps you guys!

    Then this is the end of my first question/answer on stackoverflow.
    Thanks for your help!

    ps: If it doesnt work, remove all a:hover statements in all related css files to the page with the menu. It might also be a problem if you use the StaticHoverStyle/DynamicHoverStyle.

    • 0