Cyber Security & Dot Net Security

Wednesday, September 29, 2010

Simple Navigation with CSS

 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: