经典下拉式菜单 js+css 实现

最新推荐文章于 2018-03-08 13:19:06 发布

hpugym

最新推荐文章于 2018-03-08 13:19:06 发布

阅读量670

点赞数

CC 4.0 BY-SA版权

分类专栏： Web开发

本文链接：https://blog.youkuaiyun.com/hpugym/article/details/47317795

Web开发专栏收录该内容

36 篇文章

订阅专栏

本文介绍了一种使用HTML、CSS和JavaScript实现的交互式菜单与下拉子菜单的功能，包括如何通过事件监听调整菜单显示状态，提供用户友好的导航体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>
<head>
<title>s</title>
<style type="text/css">
#a,#b,#c{display:none; margin-left:10px;}
ul{list-style:none;margin:0;}
</style>
<script type="text/javascript">
function aaa(){
    var a=document.getElementById("a");
    var link1=document.getElementById("link1");
    link1.onclick=function(){
        if(a.style.display=="block")
           a.style.display="none";
        else
           a.style.display="block";
    }
//     link1.onmouseout=function(){
//          a.style.display="none";
//     }

    var b=document.getElementById("b");
    var link2=document.getElementById("link2");
    link2.onclick=function(){
   	  if(b.style.display=="block")
         b.style.display="none";
      else
         b.style.display="block";
    }
//     link2.onmouseout=function(){
//          b.style.display="none";
//     }

    var c=document.getElementById("c");
    var link3=document.getElementById("link3");
    link3.onclick=function(){
   	  if(c.style.display=="block")
         c.style.display="none";
      else
         c.style.display="block";
    }
//     link3.onmouseout=function(){
//          c.style.display="none";
//     }
}
window.onload=function(){
    aaa();
}
</script>
</head>
<body>
  <ul>
   <li id="link1">菜单一
       <ul id="a">
         <li>选项一</li>
         <li>选项二</li>
         <li>选项三</li>
       </ul>
   </li>
   <li id="link2">菜单二
      <ul id="b">
         <li>选项一</li>
         <li>选项二</li>
         <li>选项三</li>
      </ul>
   </li>
   <li id="link3">菜单三
      <ul id="c">
         <li>选项一</li>
         <li>选项二</li>
         <li>选项三</li>
      </ul>
   </li>
  
  </ul>
</body>
</html>