Style ASP.Link button in a menu

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><a href="#"><span>Reconciliation</span></a>
                    <ul>
                        <li>
                            <asp:LinkButton ID="MyLink" runat="server" OnClick="MyLink_Click" Text="Double Entry Per Total Expired"></asp:LinkButton>
                        </li>      
                    </ul>
                </li>
                <li><a href="#"><span>Reports</span></a>
                    <ul>
                        <li><a href="ReportPages.aspx"><span>Report Generation</span></a></li>
                        <li><a href="PrendaDEPage.aspx"><span>Upload Prenda</span></a></li>
                        <li><a href="NavFilesPage.aspx"><span>Navision Uploader</span></a></li>
                    </ul>
                </li>
                <li><a href="#" class="last"><span>Maintenance</span></a>
                    <ul>
                        <li><a href="UsersMaintenancePage.aspx"><span>Report Matrix</span></a></li>
                        <li><a href="BranchMaintenancePage.aspx"><span>Branches</span></a></li>
                        <li><a href="AuditTrailPage.aspx"><span>Audit Trail</span></a></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