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。

Answer 2

尝试将css z-index property用于图片。就像z-index: 3;

一样简单

或者尝试使用css调整图像大小。

CSS菜单图标悬停重复

2 个答案: