html - CSS 菜单图标悬停重复

Question

有问题的页面是http://www.streetstyles4all.co.uk/test4.html (一般菜单下拉问题)

你好

我决定更新我的菜单以使用图标。我有一个下拉菜单，没有 java 脚本等，只有 css 和 html，我试图在下拉列表中的每个链接旁边放置图标，但在我可以继续之前，我无法通过这个问题，并摆脱用于主导航的悬停图像。该图像出现在每个菜单旁边

我不能通过这个。任何人都可以请教。

我的菜单代码是:

<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>

有问题的页面是http://www.streetstyles4all.co.uk/test4.html

Answer 1

我认为 #general 的悬停状态和高度正在应用于 #general LI 元素内的 LI 元素。您可能需要为内部 LI 元素定义一个类并将背景设置为 none 并将其标记为 !important。