JavaScript
发布时间：2022-04-16 发布网站：大佬教程 code.js-code.com
大佬教程收集整理的这篇文章主要介绍了js,jq,css多方面实现简易下拉菜单功能，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
效果图预览
一 、css实现
html代码部分
html+css下拉菜单
css部分
{
padding: 0;
margin: 0;
}
a
{
text-decoration: none;
color: #000;
}
ul,li
{
list-style: none;
}
.menu
{
margin: 50px auto;
width: 500px;
height: 35px;
BACkground-color: #cc
c;
text-align: center;
line-height: 35px;
}
.menu li
{
float: left;
width: 20%;
position: relative;
}
.menu li:hover ul
{
display: block;
}
.menu li a
{
display: block;
}
.menu li a:hover
{
BACkground-color: burlywood;
}
.menu li ul
{
display: none;
position: absolute;
}
.menu li ul li
{
width: 100%;
margin-top: 2px;
BACkground-color: darkgray;
}
.menu li ul li:hover
{
cursor: pointer;
BACkground-color: chartreuse;
}
二、js实现
html和js部分（实现方法一）
html和js部分（实现方法二）
css部分
{
padding: 0;
margin: 0;
}
a
{
text-decoration: none;
color: #000;
}
ul,li
{
list-style: none;
}
.menu
{
margin: 50px auto;
width: 500px;
height: 35px;
BACkground-color: #cc
c;
text-align: center;
line-height: 35px;
}
.menu li
{
float: left;
width: 20%;
position: relative;
}
.menu li a
{
display: block;
}
.menu li a:hover
{
BACkground-color: burlywood;
}
.menu li ul
{
display: none;
position: absolute;
left: 0;
}
.menu li ul li
{
width: 100%;
margin-top: 2px;
BACkground-color: darkgray;
}
.menu li ul li:hover
{
cursor: pointer;
BACkground-color: chartreuse;
}
三、JQ实现
html和jq部分
css部分
{
padding: 0;
margin: 0;
}
a
{
text-decoration: none;
color: #000;
}
ul,li
{
list-style: none;
}
.menu
{
margin: 50px auto;
width: 500px;
height: 35px;
BACkground-color: #cc
c;
text-align: center;
line-height: 35px;
}
.menu li
{
float: left;
width: 20%;
position: relative;
}
.menu li a
{
display: block;
}
.menu li a:hover
{
BACkground-color: burlywood;
}
.menu li ul
{
display: none;
position: absolute;
left: 0;
}
.menu li ul li
{
width: 100%;
margin-top: 2px;
BACkground-color: darkgray;
}
.menu li ul li:hover
{
cursor: pointer;
BACkground-color: chartreuse;
}
以上就是通过css,js,jq三个方式实现简易下拉菜单的写法，有更好的写法欢迎你的指教。希望大家对菜鸟教程网站的支持！
大佬总结
以上是大佬教程为你收集整理的js,jq,css多方面实现简易下拉菜单功能全部内容，希望文章能够帮你解决js,jq,css多方面实现简易下拉菜单功能所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
