Question

我正在制作一个带子菜单的菜单栏。当我将鼠标悬停在菜单上时，我需要显示子菜单，并且必须突出显示菜单。请帮帮我......

<div class="side-bar">
    <ul class="">
        <li><a href="index.html">Home</a>
        </li>
        <li><a href="about-us.html">About Us</a>
        </li>
        <li><a href="portfolio.html">Portfolio</a>
            <ul>
                <li><a href="selected-projects.html">SELECTED PROJECTS</a>
                </li>
                <li><a href="program.html" class="active">program</a>
                    <!-- i need this to be highlighted while cursoring sub menu -->
                    <ul>
                        <li><a href="residential.html">RESIDENTIAL</a>
                        </li>
                        <li><a href="hospitality.html">HOSPITALITY</a>
                        </li>
                        <li><a href="institution-commercial.html">INSTITUTION &AMP; COMMERCIAL</a>
                        </li>
                        <li><a href="infrastructure.html">INFRASTRUCTURE</a>
                        </li>
                        <li><a href="educational.html">EDUCATIONAL</a>
                        </li>
                        <li><a href="community.html">COMMUNITY</a>
                        </li>
                        <li><a href="healthcare.html">HEALTHCARE</a>
                        </li>
                        <li><a href="factory.html">FACTORY</a>
                        </li>
                        <li><a href="farm-houses.html">FARM HOUSES</a>
                        </li>
                        <li><a href="private-resi.html">PRIVATE RESIDENCES</a>
                        </li>
                        <li><a href="interiors.html">INTERIORS</a>
                        </li>
                    </ul>
                </li>
                <li><a href="chronological.html">chronological</a>
                </li>
            </ul>
        </li>
        <li><a href="services.html">services</a>
        </li>
        <li><a href="news.html">news</a>
        </li>
        <li><a href="press.html">Press</a>
        </li>
        <li><a href="d-dr.html">D [+] DR </a>
        </li>
        <li><a href="careers.html">Careers </a>
        </li>
        <li><a href="contact-us.html">Contact Us</a>
        </li>
    </ul>
</div>

Answer 1

你可以使用 CSS 来做到这一点，所以试试这个：

li:hover > a {
    /* Selects all <a> elements that are placed immediately after <li> which is hovered */
    color: #FFF; /* or any code you want */
}

因此，如果鼠标位于li本身之上，它将会突出显示，如果它超过ul或li li也会突出显示

希望这会对你有帮助..

如何在指向子菜单时突出显示菜单？

1 个答案: