It's cool. I know where I've went wrong and what exactly is causing it the <a> to go to a new line.
From putting display: block; AND width:100%; into the .a markup together, it's forced it to take up the FULL 298px of the Nav. This isn't entirely a fault, but it became the issue when I added a list-type; - for the reason that it takes a part of the width up, when there was no width left, with .a taking the full width:100%;, thus forcing the <a> to the next line.
The background .il method would do, or background images altogether in order to keep the full <IL> clickable.
Or is there another way to keep the full list item clickable?