下面是我自己所寫的代碼，只有“首頁”這個菜單的子菜單設置了延時消失。

但是有bug啊啊啊啊啊。當鼠標移到第一個主菜單時，該菜單的子菜單出現了，然后再把鼠標移到第二個子菜單，然后該菜單的子菜單也出現了。

但是問題是第一個主菜單的子菜單設置了延遲消失，然后就出現問題了。 具體如何解決呢？

ul{

list-style: none;//取消樣式

margin: 0px;

padding: 0px;

}

li{

float: left;

}

a{

text-decoration: none;

}

#nav-div{

width: 500px;

height: 40px;

background: lavender;

margin: auto;

border-bottom: solid 3px paleturquoise;

}

#nav-div ul li{

margin-left: 2px;

width: 78px;

height: 40px;

}

#nav-div ul li a{

display: block;

width: 78px;

height: 40px;

line-height: 40px;

text-align: center;

}

#nav-div ul li ul{

border:1px solid #ccc;

position: absolute;

display: none;

}

#nav-div ul li ul li{

display: block;

float: left;

}

#nav-div ul li:hover ul{

display: block;

}

//出現底部的指示線

#nav-div ul li:hover{

border-bottom: solid 3px palevioletred;

}

• 首頁

  • 最近更新
  • 活動
  • 最近更新
  • 學員反饋

• 關于我們

  • 妙味講師
  • 培訓方式
  • 培訓理念
  • 聯系我們

• 作品

  • 般固
  • MATRIK
  • 留學e網
  • ECMall

• 博客

  • JS教程
  • 彈出效果
  • 標簽云
  • 計算器

• <<更多

var shouye = document.getElementById("shouye");

shouye.onmouseout = function(){

setTimeout(function(){

document.getElementById("shouye_sub").style.display = "none";

},1000);

}

shouye.onmouseover = function(){

document.getElementById("shouye_sub").style.display = "block";

}

總結

以上是生活随笔為你收集整理的html 二级菜单延迟消失,如果让子菜单延迟消失？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。