Add a class to a menu item in WordPress

Question

I am creating a theme in WordPress. I want to add a class to a <li> element if the user is on that page.

I have managed to create a dynamic navigation, using following code in my header.php :

<div class="nav">
    <?php wp_nav_menu( array( 'theme_location' => 'nav-menu' ) ); ?>
</div>

Which in HTML, translates to:

<div class="nav">
   <ul>
      <li> Home </li>
      <li> Products </li>
      <li> About </li>
   </ul>
</div>

I am hoping to dynamically alter this. If the user is on www.website.com/about, the navigation will change to:

   <div class="nav">
       <ul>
          <li> Home </li>
          <li> Products </li>
          <li class="underline"> About </li>
       </ul>
    </div>

Answer 1

According to the docs, the current page item should already have a class .current-menu-item . you can use that to style the item with underline. Do you not see this class?

http://codex.wordpress.org/Function_Reference/wp_nav_menu#Current-Page_Menu_Items