I'm looking for some help I've been trying to fix this for awhile now. I have a menu I want to position horizontally but for some reason the first four icons stack on top of each other while the last icon positions appropiately.

Not sure if I need my entire code but this is what I have so far:

In my css file this is the code:

/* Side Nav */

ul#menu {
position : fixed;
left : 150px;
top : -25px;
z-index : 20;
}

ul#menu li {
height : 35px;
position : absolute;
}

ul#menu a {
position : absolute;
left : 100px;
top : 50px;
display : block;
width : 32px;
height : 32px;
background : url('../images/RumbleIcon.png') 0 100% no-repeat;
text-indent : -9000px;
overflow : hidden;
outline : none;
}

ul#menu li.intel a {
position : absolute;
left : 200px;
top : 50px;
display : block;
width : 32px;
height : 32px;
background : url('../images/Junkyard_Titan.png') 0 100% no-repeat;
text-indent : -9000px;
overflow : hidden;
outline : none;
}

ul#menu li.william a {
position : absolute;
left : 300px;
top : 50px;
display : block;
width : 32px;
height : 32px;
background : url('../images/Electro-Harpoon.png') 0 100% no-repeat;
text-indent : -9000px;
overflow : hidden;
outline : none;
}

ul#menu li.bing a {
position : absolute;
left : 400px;
top : 50px;
display : block;
width : 32px;
height : 32px;
background : url('../images/Electro-Harpoon.png') 0 100% no-repeat;
text-indent : -9000px;
overflow : hidden;
outline : none;
}

ul#menu li.nike a {
position : absolute;
left : 500px;
top : 50px;
display : block;
width : 32px;
height : 32px;
background : url('../images/Electro-Harpoon.png') 0 100% no-repeat;
text-indent : -9000px;
overflow : hidden;
outline : none;
}


I add into my index file with:

<ul id="menu">



</ul>