Question

导航 enter image description here

导航w /悬停状态

enter image description here

您如何使用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以涵盖下拉部分。我建议从这里开始：

至于广泛回答这个问题的具体实施需要付出很多努力。你在询问如何特别处理某些事情吗？你会使用什么HTML结构？你想用纯CSS做眼睛糖果吗？等

<强>更新感谢您的编辑 - 我很快就会修改

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

1 个答案: