the webpage I need help with is (issue with general menu drop down)
Hello
I recently decided to enhance my menu by incorporating icons. I had successfully implemented a drop-down menu using only HTML and CSS, but when I attempted to add icons next to each link in the drop-down, I encountered an issue. The problem arose when trying to remove the hover image used for the main navigation that appeared next to every menu item.
I am unable to solve this on my own. Can someone please provide guidance?
Below is my current menu code:
<ul id="menu">
<li id="home"><a href="http://www.streetstyles4all.co.uk" title="home page">Home</a></li>
<li id="general"><a href="general.html" class="drop" title="General">General</a>
<div class="dropdown_4columns">
<div class="col_1">
<h3>Street Styles 4 All</h3>
<ul id="submenu">
<li id="ss4aaboutus"><a href="about_us.html" title="About Street Styles 4 All">About Us</a></li>
<li id="ss4aagency"><a href="contact_us.html" title="Contact Us">Agency</a></li>
</ul>
</div>
<div class="col_1">
<h3>Events</h3>
<ul>
<li><a href="whats-on-next.html" title="What is the next event from Street Styles 4 All">What's on next</a></li>
<li><a href="street-dance-battles-and-competitions.html" title="Street Dance Competitions and Battles">Competitions</a></li>
<li><a href="end-of-year-show.html" title="End Of Year Show">End of Year Show</a></li>
<li><a href="street-dance-summer-school.html" title="Summer School">Summer School</a></li>
<li><a href="street-dance-master-class-workshops.html" title="Street Dance masterclass workshops">Master Classes</a></li>
</ul>
</div>
<div class="col_1">
<h3>Dance Crew</h3>
<ul>
<li><a href="demosquad.html" title="What is the next event from Street Styles 4 All">Demo Squad</a></li>
<li><a href="pureskillz.html" title="End Of Year Show">Pure Skillz</a></li>
<li><a href="performance-dates.html" title="Street Dance Competitions and Battles">Performance Dates</a></li>
<li><a href="join-the-crew.html" title="Street Dance Competitions and Battles">How to Join</a></li>
</ul>
</div>
<div class="col_1">
<h3>Dance Crew</h3>
<ul>
<li><a href="demosquad.html" title="What is the next event from Street Styles 4 All">Demo Squad</a></li>
<li><a href="pureskillz.html" title="End Of Year Show">Pure Skillz</a></li>
<li><a href="performance-dates.html" title="Street Dance Competitions and Battles">Performance Dates</a></li>
<li><a href="join-the-crew.html" title="Street Dance Competitions and Battles">How to Join</a></li>
</ul>
</div>
</div>
</li>
<li id="nearestclass"><a href="street-dance-dvd.html" class="drop" title="street dance dvd">Nearest Class</a></li>
<li id="tutorials"><a href="classes.html" class="drop" title="Street Dance Classes">Tutorials</a></li>
<li id="shop"><a href="street-dancers-for-hire.html" title="Street Dancers for Hire">Shop</a></li>
<li id="hireus"><a href="street-dancers-for-hire.html" title="Street Dancers for Hire">Hire Us</a></li>
<li id="contact"><a href="contact-us.html" title="Contact Us">Contact</a></li>
The specific page causing issues can be found at