第HTML+CSS+JavaScript實現下拉菜單效果本文實例為大家分享了HTML+CSS+JavaScript實現下拉菜單效果的具體代碼，供大家參考，具體內容如下

實現思路：

HTML方面，導航欄的每個li元素里面包含a和ul，將li設置為相對定位，將ul設置為絕對定位，并將ul的display屬性設置為none。通過js給導航欄的每個li添加事件監聽器，當鼠標覆蓋li時，令ul的display屬性值為block；當鼠標離開li時，令ul的display屬性值為none；

效果演示：

源代碼：

!DOCTYPEhtml

htmllang="en"

head

metacharset="UTF-8"

title下拉菜單/title

style

margin:0;

padding:0;

box-sizing:border-box;

body{

background-color:#ffb900;

cursor:default;

text-decoration:none;

font-size:20px;

font-weight:700;

color:#fff;

letter-spacing:3px;

li{

list-style:none;

cursor:default;

.container{

position:absolute;

top:30%;

left:50%;

transform:translate(-50%,-50%);

box-shadow:010px10pxrgba(10,20,20,.20),0010pxrgba(10,20,20,.20);

font-size:0;

.container.nav{

display:inline-block;

position:relative;

width:150px;

height:50px;

background-color:#505050;

text-align:center;

line-height:50px;

.container.nav:hover{

background-color:#3e3e3e;

.container.navul{

display:none;

position:absolute;

top:50px;

width:100%;

box-shadow:010px10pxrgba(10,20,20,.20),0010pxrgba(10,20,20,.20);

background-color:#fff;

text-align:center;

.container.navullia{

display:block;

color:#505050;

.container.navullia:hover{

background-color:#e1e1e1;

/style

/head

body

ahref="#"水果/a

liahref="#"西瓜/a/li

liahref="#"香蕉/a/li

liahref="#"哈密瓜/a/li

liahref="#"橙子/a/li

/ul

/li

ahref="#"蔬菜/a

liahref="#"西紅柿/a/li

liahref="#"土豆/a/li

liahref="#"小白菜/a/li

liahref="#"黃花菜/a/li

/ul

/li

ahref="#"酒水/a

liahref="#"啤酒/a/li

liahref="#"橙汁/a/li

liahref="#"可樂/a/li

liahref="#"雪碧/a/li

/ul

/li

ahref="#"零食/a

liahref="#"餅干/a/li

liahref="#"面包/a/li

liahref="#"辣條/a/li

liahref="#"沙琪瑪/a/li

/ul

/li

/ul

script

letnav=document.querySelectorAll('.nav');

for(leti=0;inav.length;i++){

nav[i].addEventListener('mouseover',function(){

this.children[1].style.display="block";

nav[i].addEventListener('mouseout',func