Style ASP.Link button in a menu - html

Question

im fairly new to ASP.net and CSS i would like to style my link button like my other <a href> buttons in css but they are not working.
this is my code for menu
<div id="templatemo_menu">
<ul>
<li><span>Reconciliation</span>
<ul>
<li>
<asp:LinkButton ID="MyLink" runat="server" OnClick="MyLink_Click" Text="Double Entry Per Total Expired"></asp:LinkButton>
</li>
</ul>
</li>
<li><span>Reports</span>
<ul>
<li><span>Report Generation</span></li>
<li><span>Upload Prenda</span></li>
<li><span>Navision Uploader</span></li>
</ul>
</li>
<li><span>Maintenance</span>
<ul>
<li><span>Report Matrix</span></li>
<li><span>Branches</span></li>
<li><span>Audit Trail</span></li>
</ul>
</li>
</ul>
</div>
and this is my CSS for the Menu
/* menu */
#templatemo_menu
{
clear: both;
width: 100%;
height: 30px; /*padding: 0 10px;*/ /*margin-bottom: 20px;*/ /*margin-left:13px;*/
background: url(../Images/bgContent.jpg) center no-repeat;
}
#templatemo_menu ul
{
/*float: left;*/
margin: 0 auto;
text-align: center;
width: 100%;
display: inline-block;
height: 70px;
margin: 0;
padding: 1px 0;
list-style: none;
}
#templatemo_menu ul li
{
padding: 0 0 0 0;
margin: 0;
display: inline-block;
}
#templatemo_menu ul li a
{
float: left;
display: block;
height: 22px;
width: 440px;
padding: 5px 0 0 0;
font-size: 11px;
color: #666;
text-align: center;
text-decoration: none;
font-weight: normal;
outline: none;
border: none;
background: url(../Images/templatemo_menu_divider.gif) repeat-y right;
}
#templatemo_menu ul li a span
{
display: block;
font-size: 17px;
font-weight: normal;
color: #ffffff;
}
#templatemo_menu ul li .last
{
background: none;
}
#templatemo_menu ul li a:hover, #templatemo_menu ul .current
{
color: #a13c03;
}
#templatemo_menu ul li a:hover span, #templatemo_menu ul .current span
{
color: #a13c03;
}
#templatemo_menu ul li a span:hover
{
color: #a13c03;
}
#templatemo_menu ul li:hover
{
background: #0298D7;
}
#templatemo_menu li:hover ul
{
display: block;
background: #0A5185;
height: auto;
width: 440px;
margin-top: 25px;
z-index: 2;
}
#templatemo_menu li ul
{
display: none;
position: absolute;
}
#templatemo_menu li ul li
{
clear: both;
border-style: none;
}
#templatemo_menu li ul li:hover
{
background-color: #0298D7;
}
i tried a.MyLink:link{do css here} nut it is not working.. any help?? :(

Answer 1

Change your link button to this
<asp:LinkButton ID="MyLink" runat="server"><span>Double Entry Per Total Expired</span></asp:LinkButton>
Your style is targeting the span > anchor, so you'll need to add that span around the text like you did for the other anchor tags