Создание горизонтальной навигации с различными цветами

Question

Я пытаюсь создать простое меню навигации с различными цветами фона для каждой опции и горизонтально. Пока у меня есть моя навигация, как показано.

<ul id="session-nav"> 
    <li class="session1"><a href="#" class="active">Session 1</a></li> 
    <li class="session2"><a href="#">Session 2</a></li> 
    <li class="session3"><a href="#">Session 3</a></li> 
</ul> 

Но я смущен о том, как это сделать с помощью CSS.

Я бы хотел, чтобы это меню выглядело как показано на рисунке.

Большое спасибо, Jonny.

Answer 1

Вы хотите сделать следующее с кодом:

CSS:

#session-nav { list-style: none; } 
#session-nav li { display: inline-block; padding: 5px 10px; } 
#session-nav li.session1 { background: green; } 

EDIT: Вот jsfiddle http://jsfiddle.net/hgJ68/

Answer 2

Я не буду делать все это, но вот основная идея:

* { margin: 0; padding: 0;} 
#session-nav { 
    width: 100%; 
    background: #bdc3c7; 
} 
/* make the li's display inline */ 
#session-nav li { 
    display: inline-block; 
} 

/* remove the underline from the links */ 
#session-nav li a { 
    text-decoration: none; 
} 

/* add a background */ 
.session1 { 
    background: #2ecc71; 
} 

.session2 { 
    background: #e67e22; 
} 

.session3 { 
    background: #f1c40f 
} 

DEMO