I am attempting to create a horizontal menu using image sprites and text, but have been unsuccessful so far.
Although I have an idea of what I want it to look like, my CSS is not achieving the desired result.
This is what my current CSS looks like:
<div id="top_menu" class="grid_6">
<ul id="top_nav">
<li class="sprite contact sales"><span>Sales:1-800-555-7777</span></li>
<li class="sprite contact login"><span>Administrator</span></li>
<li class="sprite contact forum"><span>Forum</span></li>
<li class="sprite contact livechat"><span>Live Chat</span></li>
</ul>
</div>
Despite my efforts, the images are overlapping with the text and displaying multiple icons. Can anyone provide me with some guidance on how to resolve this issue? I would greatly appreciate it!