jquery - 如何在 HTML 中使用 CSS 设置下拉菜单的样式

Question

我有一个使用 HTML 和 CSS 的下拉菜单。目前它很简单并且可以工作，但根据我的要求，我希望我的下拉菜单类似于此图像......请引用示例图片... Sample DropdownImage Image

我希望我的下拉列表在鼠标悬停到达时立即改变，就像这个 Angular 设计一样，两个链接之间有线。

我在这里尝试创建一个 fiddle ，但我的 jquery 无法正常工作，所以我的鼠标悬停事件无法正常工作..

这是我的 HTML..

  <div class='menu'>
                <a class='hover-link'>ABOUT US</a>

                <div class='sub'>
                    <ul class='sub-options'>
                        <li><a href='#'>Home</a>
                        </li>
                        <li><a href='#'>About</a>
                        </li>
                        <li><a href='#'>Services</a>
                        </li>
                        <li><a href='#'>Contact</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

请看我的 fiddle ..

Fiddle

请帮助我的鼠标悬停时的 fiddle 下拉菜单像图片中那样进行更改

Answer 1

这是关于如何创建纯 CSS 下拉菜单的非常好的分步指南。

http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu

我建议这样做以最大程度地减少网站负载，减少 javascript 使用通常是个好主意，尤其是因为您可以在 CSS3 中使用大量动画类型。现在!