如何制作2级导航栏？

Question

我想制作一个导航栏，就像http://cryengine.com/上的导航栏一样，但我不知道如何。

HTML：

    <div class="navigation">
        <ul id="main-navigation">
            <li><a href="#">Home</a></li>
            <li><a href="#">Forum</a></li>
            <li><a href="#">Projects</a></li>
            <li><a href="#">Store</a></li>
            <li><a href="#">Other</a></li>
        </ul>
        <ul id="dev-navigation">
            <li><a href="#">Developer Login</a></li>
            <li><a href="#">Admin Panel</a></li>
        </ul>
    </div>

谢谢你的帮助。我没有发布任何CSS，因为我没有任何。

Answer 1

你想要这样的样品吗？

查看我的CodePen Link

＆＃13;

＆＃13;

.navigation {
  width: 100%;
  height: auto;
  text-align: right;
  padding-top: 15px;
  padding-bottom: 15px;
  background-color: #303030;
}
#main-navigation,
#dev-navigation {
  height: 40px;
  margin: auto;
  line-height: 40px;
  max-width: 1400px;
}
#main-navigation {
  width: 100%;
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}
#dev-navigation {
  width: 70%;
}
ul li {
  list-style: none;
  display: inline;
}
a {
  text-decoration: none;
  color: white;
  font-family: 'Source Sans Pro', sans-serif;
  margin: 10px;
}
a:hover {
  text-decoration: underline;
}

＆＃13;

<div class="navigation">
  <ul id="main-navigation">
    <li><a href="#">Home</a>
    </li>
    <li><a href="#">Forum</a>
    </li>
    <li><a href="#">Projects</a>
    </li>
    <li><a href="#">Store</a>
    </li>
    <li><a href="#">Other</a>
    </li>
  </ul>
  <ul id="dev-navigation">
    <li><a href="#">Developer Login</a>
    </li>
    <li><a href="#">Admin Panel</a>
    </li>
    <li><a href="#">Sign up</a>
    </li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

＆＃13;

＆＃13;

.navigation {
  position: relative;
  top: 0;
  left: 0;
  background: black;
}
#dev {
  position: relative;
  top: 0;
  height: 48px;
}
ul#dev-navigation {
  float: right;
  display: inline-block;
  font-size: 12px;
  border-right: 1px solid #e2e2e2;
}
#dev-navigation li {
  padding: 4px;
  display: inline-block;
}
ul#main-navigation {
  float: right;
  display: inline-block;
  font-size: 14px;
}
#main-navigation li {
  padding: 6px;
  display: inline-block;
}

＆＃13;

<div class="navigation">
  <div id="dev">
    <ul id="dev-navigation">
      <li><a href="#">Developer Login</a>
      </li>
      <li><a href="#">Admin Panel</a>
      </li>
    </ul>
  </div>
  <div id="main">
    <ul id="main-navigation">
      <li><a href="#">Home</a>
      </li>
      <li><a href="#">Forum</a>
      </li>
      <li><a href="#">Projects</a>
      </li>
      <li><a href="#">Store</a>
      </li>
      <li><a href="#">Other</a>
      </li>
    </ul>
  </div>

</div>

＆＃13;

＆＃13;

＆＃13;