Question

the page in question is http://www.streetstyles4all.co.uk/test4.html (general menu drop down problem)

Hi

I have decided to update my menu to use icons. I had a drop down menu working with no java script etc just css and html, and I tried to put icons beside each link in the drop down, but before I could go any further I could not get passed this problem, and get rid of the hover image that is used for the main navigation. The image appears next to every menu

I can’t get passed this. Can anyone please advise.

My menu code is:

<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 page in question is http://www.streetstyles4all.co.uk/test4.html

Answer 1

I think the hover state and the height for #general is getting applied to the LI elements that are inside the #general LI element. You may need to define a class for the inner LI elements and set the background as none and mark it !important.