Just getting started with ASP.net and CSS, I want to customize my link button using CSS similar to other <a href> buttons, but I seem to be running into some issues.
This is the code for my 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>
Here's the 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
{
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've tried adding a.MyLink:link{do css here}, but it doesn't seem to be working. Any suggestions or help would be greatly appreciated! :(