Home/ Questions/Q 8413715
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T00:58:23+00:00

How to apply CSS class file to a Menu item control.I have a menu

  • 0

How to apply CSS class file to a Menu item control.I have a menu control and i have to change the color of the items in the menu control so i want to set the css class file to menu items how to do it? 

 <asp:Menu ID="Menu1"  Orientation="Horizontal" Width="10%"  runat="server">

    <Items>
       <asp:MenuItem NavigateUrl="~/Home.aspx" Text="HOME" Value="HOME" ></asp:MenuItem>

          <asp:MenuItem NavigateUrl="~/Services.aspx" Text="Services" Value="Services"></asp:MenuItem>


    </Items>

.staticSelectedStyle
 {
background-color:Black;
color: Black;
border-bottom: solid 1px #eee;
z-index: 100;   
position:static ; 
}
.menu
 {
color:red;
font-size:8pt;
}



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head><title>
    Untitled Page
</title><style type="text/css">
    .Menu1_0 { background-color:white;visibility:hidden;display:none;position:absolute;left:0px;top:0px; }
    .Menu1_1 { text-decoration:none; }
    .Menu1_2 { width:10%; }
    .Menu1_3 { border-style:none; }
    .Menu1_4 {  }

</style></head>
<body bgcolor="White">
    <form name="form1" method="post" action="Home.aspx" id="form1">
<div>
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTExMDkxNDM3NDBkZPybQbNBNXmmSEsEqSKyNytMNUMP" />
</div>

<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
    theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
//]]>
</script>


<script src="/WebResource.axd?d=c13d03l4iRJYztoKmiA9KbiJvKkgLiZx2Ej3H51K9TkHC5oF5AnDj7i7I3pag2QP1kUUmWXfqmB-6_02vs8O-hVKwro1&amp;t=634604623351482412" type="text/javascript"></script>


<script src="/WebResource.axd?d=pQc--vnbz5_GrPOMtzvfxI81FzBtntStkXAkQy1fKnh_ihqNd7bG0tjA4qeeYAUFrJCW8rMqbmZxY_x3y024GXcJdas1&amp;t=634604623351482412" type="text/javascript"></script>
<div>

    <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAgKWr/2HAQKM54rGBpc2vYbWOzz2bN+7+yXQhzJUEzlI" />
</div>
    <div>

        <a href="#Menu1_SkipLink"><img alt="Skip Navigation Links" src="/WebResource.axd?d=mP8Ot2JexWz7kq5vYEuSB3Fh38hbxIJW0VZEOr6Wh54N5ZYBu166FK7dh5c_y7rC1ZZeVhIaexIzk95Jfrt1BLeqkSw1&amp;t=634604623351482412" width="0" height="0" style="border-width:0px;" /></a><table id="Menu1" class="menu Menu1_2" cellpadding="0" cellspacing="0" border="0">
    <tr>
        <td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(event)" id="Menu1n0"><table cellpadding="0" cellspacing="0" border="0" width="100%">
            <tr>
                <td style="white-space:nowrap;"><a class="Menu1_1" href="Home.aspx">HOME</a></td>
            </tr>
        </table></td><td style="width:3px;"></td><td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(event)" id="Menu1n1"><table cellpadding="0" cellspacing="0" border="0" width="100%">
            <tr>
                <td style="white-space:nowrap;"><a class="Menu1_1" href="Services.aspx">Services</a></td>
            </tr>
        </table></td>
    </tr>
</table><a id="Menu1_SkipLink"></a>

    </div>

    <input type="submit" name="Button1" value="Button" id="Button1" class="menu" />


<script type="text/javascript">
//<![CDATA[
var Menu1_Data = new Object();
Menu1_Data.disappearAfter = 500;
Menu1_Data.horizontalOffset = 0;
Menu1_Data.verticalOffset = 0;
//]]>
</script>
</form>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Have a look at the msdn : http://msdn.microsoft.com/en-us/library/ms366731.aspx

    <asp:menu id="NavigationMenu2"
  staticdisplaylevels="3"
  orientation="Vertical"
  target="_blank"  
  runat="server"
  CssClass="menu2">

<levelsubmenustyles>
  <asp:submenustyle CssClass="level1" />
  <asp:submenustyle CssClass="level2"/> 
</levelsubmenustyles>

    In this case, level1 will be your menu, and level 2 its items.

    • 0