Cant get my fixed to top navigation next to each other

I have read almost 50 articles about how to get divs or anything next to each other with html and css, but i simply can't find the mistake I am making.

My HTML looks like this:

    <!-- Navigation -->
    <nav>
        <ul>
            <li>
                <a href="#index">aaaaaa</img></a>
            </li>

            <li>
                <a href="#over">bbbbbb</a>
            </li>

            <li>
                <a href="#muziek">cccccc</a>
            </li>

            <li>
                <a href="#gigs">dddddd</a>
            </li>

            <li>
                <a href="#contact">eeeeee</a>
            </li>
        </ul>
    </nav>

And the CSS like this:

nav {
    position:fixed;
    z-index: 100;
    top:0;
    left:0;
    background-color: rgba(0,0,0,0.7);
    width: 100%;
    height: 58px;
}

ul {
    list-style-type: none;
    }

li {
    float: left;
    display: inline-block;
}

a {
    position:fixed;
    top: 0;
    color: #FFFFFF;
    text-decoration: none;
    margin-left: 10%;   
    }

Notice that my navigation bar, and the links inside it are both foxed to top. Right now all the links are stacked on top of each other on the place where i want the first link. Next I want the links to get next to each other, instead of on top of each other. Any help would be great :)

Kind regards

Solution

One solution is to remove position: fixed from a elements. Also remove float: left from li elements(display: inline-block is enough):

nav {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.7);
  width: 100%;
  height: 58px;
}
ul {
  list-style-type: none;
}
li {
  display: inline-block;
}
a {
  top: 0;
  color: #FFFFFF;
  text-decoration: none;
  margin-left: 10%;
}

<!-- Navigation -->
<nav>
  <ul>
    <li> <a href="#index">aaaaaa</a>

    </li>
    <li> <a href="#over">bbbbbb</a>

    </li>
    <li> <a href="#muziek">cccccc</a>

    </li>
    <li> <a href="#gigs">dddddd</a>

    </li>
    <li> <a href="#contact">eeeeee</a>

    </li>
  </ul>
</nav>