1
Reply

how to highlight a menu link when clicked

deepa ashwi

deepa ashwi

Dec 21 2013 4:42 AM
843

following is the css i am using :

<style type="text/css">

.backround

{

margin: 0px 0;

padding: 0;

position: absolute;

background-image: url( 'Images/imageback.jpg' );

font-family: Times New Roman;

font-size: small;

width: auto;

height: auto;

font-size: 19px;

font-weight: bold;

text-decoration: none;

}

.div

{

width: auto;

margin: 0px auto;

}

div ul li a:link, div ul li a:visited

{

display: block;

background-color: #006699;

font-family: Arial, Helvetica, sans-serif;

font-weight: bold;

font-size: 14px;

color: #c1bfd5;

text-align: center;

text-decoration: none;

padding: 2px;

border-bottom: 1px solid #fff;

width: 150px;

line-height: 30px;

}

div ul li a:hover

{

background-color: #030;

}

div ul li a:active,div ul li a.active

{

background-color:Red;

}

li ul li a:link, li ul li a:visited

{

display: block;

background-color: #99ccff;

font-family: Arial, Helvetica, sans-serif;

font-weight: normal;

font-size: 12px;

color: Blue;

text-align: center;

text-decoration: none;

padding: 2px;

border-bottom: 1px solid #fff;

width: 150px;

line-height: 30px;

}

li ul li a:hover

{

background-color: #CCFFFF;

}

li ul li a:active,li ul li a.active

{

background-color:Red;

}

ul

{

list-style-type: none;

margin: 0px;

padding: 0px;

width: 1092px;

}

div ul li

{

float: left;

width: 150px;

}

ul li ul li

{

float: none;

margin-left: 0px;

}

li ul

{

display: none;

position: absolute;

}

li:hover ul

{

display:none;

}

.style1

{

height: 25px;

}

.highlight_stay

{

background-color: Red;

}

</style>

<ul>

<li><a href="#" style="font-size: medium; font-family: Arial; color: #FFFFFF; font-weight: lighter;

font-style: normal; text-decoration: none;">Import</a><ul>

<li><a href="EmployeeDetails.aspx" style="font-size: small; font-family: Arial; font-weight: bold;

font-style: normal; color: #3366CC; text-decoration: none">Employee Master</a></li>

<li><a href="SalaryMaster.aspx" style="font-size: small; font-family: Arial; font-weight: bold;

font-style: normal; color: #3366CC; text-decoration: none">Salary</a></li>

<li><a href="SalaryProcess.aspx" style="font-size: small; font-family: Arial; font-weight: bold;

font-style: normal; color: #3366CC; text-decoration: none">Monthly Salary Details</a></li></ul>

</li>

</ul>


Answers (1)