jQuery and Links

jQuery and Links


I'm new to jQuery, so forgive my noobness...

I'm setting up my navigation on my  personal site. I have just a basic little layout and a navigation. The navigation is super simple, just plain text links that when they are hovered I set a border-bottom property so I can have a nice thick line below them. However, I can't get a.selected working. When a user hovers, I want a border-bottom property to be displayed but I also want a border-bottom property on the selected link, or the link to the page they are currently on. So if they were on the portfolio page, the portfolio link would have a border-bottom property set, whether they were hovering over it or not. I should be able to use 'a.selected' for this but it's not working and I've tried it a million different ways.

So my question is a simple one. How do I get jQuery to recognize the link of the page I'm currently on? I've seen it done before but for the life of me I can't remember how to do it or find it anywhere. I know it's probably something very simple too.

Something like:

$(this).selected('a').hover(function(){
// not sure what would come here either, I would append a css border-bottom
// property to the currently selected link. That would require finding the currenlty
// selected link's class and appending that css property.
});

Here is what my html and css looks like for the navigation:

#nav {
  position:absolute;
  top:50px;
  left:480px;
}

#ul#menu li {
  position:relative;
  display:inline;
  list-style:none;
  float:left;
  line-height:25px;
}

.msize {width:70px}
.msize1 {width:110px;}
.msize2 {width:95px;}
ul#menu li a {color:#fe4902; text-decoration:none;}
ul#menu li a:hover {border-bottom:2px solid rgb(255,255,255);}
ul#menu li a.selected {border-bottom:2px solid rgb(240,240,240);} /* NOT WORKING */

HTML:

<nav id="nav">
  <ul id="menu">
    <li class="msize"><a href="index.html">Home</a></li>
   

























<li class="msize1"><a href="portfolio.html">Portfolio</a></li>
   
<li class="msize2"><a href="contact.html">Contact</a></li>
    </ul>
</nav>


If anything, I would prefer to do it with CSS alone because that way if javascript is disabled I'm all good. But then again, the navigation works crystal clear except the border-bottom on links of the currently viewed page. So even if I do use JS and it's disabled, I'll still have a good looking, working menu, just without that one property.

Thanks!