I didn’t like the duplicate content you were using for the link text when it hovers (and neither will google) so I re-wrote a simpler menu using text-shadow to automatically reproduce the text content.
The html is clean with no extra elements although if you need more function then you may need to use an extra empty nested element or 2 instead the :before and afters that I used.
It should give you some ideas but remember not everything is possible in css alone so you may need to compromise or add a script if the function you want can’t be made to work… 