CODEWITHSUNDEEP
htmlcsscolorsnav
user2209033
user2209033

Reputation:

Creating a horizontal navigation with different colours

I am trying to create a simple navigation menu with different background colours for each option, and which is horizontal. So far I have my navigation as shown. 

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

But I am confused on how to do this with CSS.

I would like this menu to look like the image shown.

enter image description here

Many thanks, Jonny.

Upvotes: 1

Views: 282

Answers (2)

brbcoding
brbcoding

Reputation: 13586

I won't make the whole thing, but here's the basic idea:

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

Upvotes: 1

Chad
Chad

Reputation: 490

You'll want to do the following with your code:

CSS:

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

EDIT: Here is a jsfiddle http://jsfiddle.net/hgJ68/

Upvotes: 2

Related Questions