Question

我有一个使用HTML和CSS的下拉菜单。目前它很简单，但是根据我的要求，我希望我的下拉列表与此图像相似... 请参考.. Sample DropdownImage Image

上的示例图片

我希望我的下拉列表会在鼠标悬停到达就像这个角度设计一样，在两个链接之间插入线条时更改。

这里我试图创建一个小提琴，但我的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

请帮助我的小提琴下拉鼠标悬停以改变，就像在图像中一样

Answer 1

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

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

我建议这样做以尽量减少网站负载，减少javascript使用通常是一个好主意，特别是因为你现在可以在CSS3中使用一堆动画类型！

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

1 个答案: