The HTML
<div id="navigation">
<ul>
<li><a id="Links_Home" accesskey="H" title="to home page." href="/Default.aspx">Home</a></li>
<li><a id="Links_About" title="About us." href="/about.aspx">About us</a></li>
<li><a id="Links_Contact" title="Contact form." href="/contact.aspx">Contact me</a></li>
</ul>
</div>
you can set the class of the selected node to current to highlight it
The CSS
#navigation
{
/*the section that holds all the links to various parts of the site
such as archives, categories, and blogroll */
float:right;
}
#navigation ul{
list-style: none;
margin: 0px;
padding: 0px;
display: inline;
height:22px;
}
#navigation ul li{
list-style: inline;
display: inline;
}
#navigation ul li a{
padding: 5px 15px;
text-decoration:none;
color:#fff;
font-weight:bold;
}
#navigation ul li a:visited{
}
#navigation ul li a:hover, #navigation ul li.current a{
background-image:url(Images/underlink.jpg);
background-position:bottom;
background-repeat:repeat-x;
margin:0;
padding-bottom:5px;
border:0;
/*border-bottom: 4px solid #fff;*/
}
No comments:
Post a Comment