fixed menu issue, menu stacks vertically when fixed

Question

im building a personal portfolio for school projects. and i ran in to a problem. i want to make my desktop menu fixed, but when i do it my menu stacks vertical instead for horizontal.

my test page: http://bravitus.com/www/test/test.html i want to make my menu as it is but fixed instead of relative.

when i place it as fixed it makes the many like this:

Home About me Contact

but i want it to go like this:

Home > About me > Contact

JSFiddle: http://jsfiddle.net/39fz0gsd/4/

Hope you have a fix ;)

HTML:

<ul class="navigation">
    <li><a href="#page-1" class="home selected">HOME</a></li>
    <li><a href="#page-2" class="aboutMe">ABOUT ME</a></li>
    <li><a href="#page-3" class="services">CONTACT</a></li>
</ul>

CSS:

ul{
    list-style:none;
}

ul li{
    position:relative;
}

Answer 1

You have to add the position fixed to the ul (not the li) and add width:100% as well.

ul{
    list-style:none;
    position:fixed;
    width:100%;
}

Have a look at your fiddle I've updated it.