How to create this style of nav bar using exclusively HTML5 and CSS?

Question

Anyone able to explain how to create the fixed navigation bar in the link below using an unordered list exclusively with HTML5 and CSS3 (no JavaScript, jQuery and the like)? I've spent hours now trying to get it like my Photoshop mock-up, but with no joy.

The navigation bar is fixed and the content has a width of 1200px, automatically centred using

margin-left: auto;
margin-right: auto;

and all colours are indicated by hex values within the image.

Also, I'm aware of the compatibility issues with having a fixed navigation bar in older browsers, but this is for a college assignment, so no need to include browser hacks.

Give us what you have so far. You can't expect people to write up the whole menu but we might be able to help you with a specific issue — Mathias, Apr 03 '14 at 19:47
[This](http://stackoverflow.com/questions/8449272/how-can-i-make-a-menubar-fixed-on-the-top-while-scrolling) should get you started. — fzzylogic, Apr 03 '14 at 19:53
Unfortunately I don't have the markup with me at the moment, I can submit an attempt I made earlier at it maybe? I apologise, this is probably quite a n00by question, but I'm relatively new to HTML and CSS if I'm honest — user3495338, Apr 03 '14 at 19:54
"Fixed width at 1200px" == a website I navigate off from when I'm using my laptop, tablet, or one of my older desktops. Side scroll bars that do nothing for the design or aesthetics are for chumps. Just putting that out there. — Chris Baker, Apr 03 '14 at 20:32

score 1 · Accepted Answer · answered Apr 03 '14 at 20:04

Something like this? fiddle

HTML:

<div id="navbar">
    <ul id="navbar-list">
        <li>Home</li>
        <li>About the Course</li>
        <li>How to Apply</li>
        <li>What Students Say</li>
    </ul>
</div>

CSS:

*
{
    margin: 0;
    padding: 0;
}

#navbar-list
{
    width: 1200px;
    height: 100px;
    list-style-type: none;
    display: block;
    background-color: #3d3d3d;
    text-align: center;
}

li
{
    display: inline-block;
    margin-top: 35px;
    color: #fff;
    font-size: 24px;
    margin-left: 25px;
    border-radius: 5px;
    cursor: pointer;
    font-family: Sans-Serif;
}

li:hover
{
    background-color: #808080;
}

How to create this style of nav bar using exclusively HTML5 and CSS?

1 Answers1