下拉菜单怎样实现?简易下拉菜单代码分享
发布时间:2022-04-14 14:01:13 所属栏目:语言 来源:互联网
导读:这篇文章给大家分享的实现一个简易下拉菜单的代码,会使用到HTML、css3以及JS,小编觉得挺实用的,因此分享给大家做个参考,下图是实现效果,感兴趣的朋友就继续往下看吧。 实现效果 html div class=container h1 class=titleDropdown Menu/h1 ul li class=d
这篇文章给大家分享的实现一个简易下拉菜单的代码,会使用到HTML、css3以及JS,小编觉得挺实用的,因此分享给大家做个参考,下图是实现效果,感兴趣的朋友就继续往下看吧。 实现效果 html <div class="container"> <h1 class="title">Dropdown Menu</h1> <ul> <li class="dropdown"> <a href="#" data-toggle="dropdown">First Menu <i class="icon-arrow"></i></a> <ul class="dropdown-menu"> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Services</a></li> <li><a href="#">Contact</a></li> </ul> </li> <li class="dropdown"> <a href="#" data-toggle="dropdown">Second Menu <i class="icon-arrow"></i></a> <ul class="dropdown-menu"> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Services</a></li> <li><a href="#">Contact</a></li> </ul> </li> <li class="dropdown"> <a href="#" data-toggle="dropdown">Third Menu <i class="icon-arrow"></i></a> <ul class="dropdown-menu"> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Services</a></li> <li><a href="#">Contact</a></li> *, *:before, *:after { -webkit-border-sizing: border-box; -moz-border-sizing: border-box; border-sizing: border-box; (编辑:云计算网_泰州站长网) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |