html - html中闪烁的多级下拉菜单

Question

任何人请告诉我加载产品的子菜单有什么问题。

链接在这里：

http://www.lexurcapacitor.com/index.html

这是css链接：

http://www.lexurcapacitor.com/css/style.css

Answer 1

我发现菜单闪烁是因为文件中的代码<script src="js/dualflow.js"></script>；

c("#header-nav").delegate("li","mouseenter mouseleave",function(f){

此代码在<nav id="header-nav">. 这段代码的缺点是，它也考虑了子菜单中的li！

我得到的最简单的解决方案是为第一个菜单项的li元素设置一个类（例如：Home、About、Products...）

HTML 更新

<nav id="header-nav">
        <ul>
            <li class="current menu">
                <a href="index.html">Home</a>
            </li>
            <li class="menu">
                <a href="about.html">About</a>
            </li>                       
            <li class="menu">
                <a href="msc.html">Products</a>
                <ul>
                    <li>
                        <a href="msc.html">Motor Start Capacitor</a>
                        </li>   
                        <li>
                            <a href="mrc.html">Motor Run Capacitor</a>
                        </li>   
                        <li>
                            <a href="tc.html">Terminal Capacitor</a>
                        </li>   
                        <li>
                            <a href="bstc.html">Box Square Type Capacitor</a>
                        </li>   
                        <li>
                            <a href="flc.html">Fluorescent Lighting Capacitor</a>
                        </li>
                        <li><a href="fc.html">Fan Capacitor</a>
                        </li>                   
                    </ul>
                </li>  
                <li class="menu">
                    <a href="needus.html">Need us</a>
                </li>
                <li class="menu">
                    <a href="network.html">Network</a>
                </li>
                <li class="menu">
                    <a href="certificate.html">Certificates</a>
                </li>
                <li class="menu">
                    <a href="contact.html">Contact</a>
                </li>
            </ul>
        </nav>

dualflow.js 更新

使用以下代码更新 dualflow.js 文件（添加类“菜单”）

c("#header-nav").delegate("li","mouseenter mouseleave",function(f){

c("#header-nav").delegate("li.menu","mouseenter mouseleave",function(f){