我有一个使用 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 下拉菜单像图片中那样进行更改
最佳答案
这是关于如何创建纯 CSS 下拉菜单的非常好的分步指南。
http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu
我建议这样做以最大程度地减少网站负载,减少 javascript 使用通常是个好主意,尤其是因为您可以在 CSS3 中使用大量动画类型。现在!
关于jquery - 如何在 HTML 中使用 CSS 设置下拉菜单的样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23809152/