How would you implement this navigation using HTML and CSS?

Navigation

Nav w/ Hover State

How would you implement this navigation using HTML and CSS?

The white box is a placeholder for a logo.

PS: The "Products" link is a drop down menu.

My current implementation below. (Not complete)

#mainNav {
  height: 60px;
  background: url(../../images/main-nav-left.png) top left no-repeat, url(../../images/main-nav-right.png)开发者_如何学Go top right no-repeat, url(../../images/main-nav-repeat.png) top repeat-x;
}
#mainNav li {
  float: left;
  height: 48px;
  font-weight: bold;
  background-color: red;
  margin-top: 5px;
}
#mainNav li:not(.logo-wrapper) {
  padding: 0px 47px;
  font-size: 17px;
  text-transform: uppercase;
}
#mainNav li a {
  display: block;
  background-color: green;
  margin-top: 15px;
}
#mainNav li.logo-wrapper {
  margin-left: 15px;
}
#mainNav h1 {
  margin-top: -15px;
}

<nav class="thirteen columns" id="mainNav">
  <ul>
    <li class="logo-wrapper">
      <h1 id="logo">
    	    <%= link_to image_tag('logo.png'), root_path %>
    	  </h1>
    </li>

    <li>
      <a href="#">Products</a>
    </li>

    <li>
      <a href="#">Parts</a>
    </li>

    <li>
      <a href="#">Resources</a>
    </li>
  </ul>
</nav>

My main problem is figuring out how to get the slanted separators and the right end of the nav working with the hover states.

Well first things first, I would learn about both of those technologies, and also jQuery to cover the drop down portion. I suggest starting here:

• http://diveintohtml5.ep.io/
• http://www.alistapart.com/
• http://www.quirksmode.org/compatibility.html
• http://docs.jquery.com/Main_Page
• http://htmldog.com/
• http://code.google.com/edu/submissions/html-css-javascript/

As for specific implementation to answer that question broadly would take a lot of effort. Are you asking about how to handle something in particular? What HTML structures you would use? Are you trying to do the eye candy using pure CSS? Etc.

Update: Thanks for editing -- I'll revise shortly