html - 您将如何使用 HTML 和 CSS 实现此导航？

Question

导航

导航 w/ 悬停状态

您将如何使用 HTML 和 CSS 实现此导航？

白框是徽标的占位符。

PS：“产品”链接是一个下拉菜单。

我目前的实现如下。（不完整）

#mainNav {
  height: 60px;
  background: url(../../images/main-nav-left.png) top left no-repeat, url(../../images/main-nav-right.png) 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>

我的主要问题是弄清楚如何让倾斜的分隔符和导航的右端与悬停状态一起工作。

Answer 1

首先，我将了解这两种技术，以及 jQuery 以涵盖下拉部分。我建议从这里开始：

• 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/

至于具体的实现，要广泛回答这个问题需要付出很多努力。您是在询问如何处理特定的事情吗？您将使用哪些 HTML 结构？您是否尝试使用纯 CSS 来吸引眼球？等等。

---

更新： 感谢编辑——我会尽快修改