ASP.net HTML5 <nav> Gradient effect

Hi

I have a Master Page with the following markup. I want the <nav> part of the markup to have a gradient effect
similar to that in the image. At the moment, when the user hovers over each navigation item the background
color changes. I just need a little guidance on how to do this. Thanks


1
<%@ Master Language="VB" AutoEventWireup="false" CodeBehind="Site1.master.vb" Inherits="OES5.Site1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Microsoft Excel Spreadsheet Consulting | Excel Cloud Accounting | Office 365 Sharepoint</title>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
     <style type="text/css">
        .style1
        {
            height: 34px;
        }
        .myHoverButton {
            background-color:White ;
            border: none;
            font-family :Century Gothic;
            color:Maroon;
            text-align:left;                          
        }
        .myHoverButton:hover {
            background-color:Orange;            
        }  
   


.contentheading {

      font-size: 200%;

      line-height: normal;

      color: #1a922e;

}



h2.contentheading, .contentheading {

      font-weight: normal;

      margin: 0;

      padding: 0;

      line-height: normal;

}



     .style2
     {
         border-collapse: collapse;
         width: 100%;
         border-style: none;
         border-color: inherit;
         border-width: medium;
     }
     .style3
     {
         font-size: 100%;
     }
     .style4
     {
         text-align: left;
         font-size: 100%;
     }
     .style5
     {
         float: left;
         font-size: 100%;
     }
     </style>
</head>


<body>
       <!--nav element must live inside the 'body' element-->
  <nav>
    <ul>
      <li><a href="Default.aspx" class="myHoverButton">Home</a></li>
      <li><a href="Webform1.aspx" class="myHoverButton">Page 1</a></li>
      <li><a href="Webform2.aspx" class="myHoverButton">Page 2</a></li>
    </ul>
  </nav>
    <form id="form1" runat="server">
    <div>
        <!--The ContentPlaceHolder area is used by the other pages to merge their content with the master page-->
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
       
        </asp:ContentPlaceHolder>
    </div>
    </form>
</body>
</html>
Murray BrownMicrosoft Cloud Azure/Excel Solution DeveloperAsked:
Who is Participating?
 
COBOLdinosaurCommented:
I have a couple of pages on my personal site that should help. First basic CSS gradients

Then using hover with gradient changes. Some with transitions

If you need more information let me know.

Cd&
0
 
Murray BrownMicrosoft Cloud Azure/Excel Solution DeveloperAuthor Commented:
Thanks very much
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.