Как сделать 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> 

Спасибо за youe помощь. Я не публиковал CSS, потому что у меня его нет.

Answer 1

Вам нужен образец?

Смотрите мой CodePen Link

.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; 
 
}

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

Answer 2

.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; 
 
}

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