<!DOCTYPEhtml><html><head><title>下拉菜单实例|菜鸟教程(runoob.com)</title><metacharset="utf-8"><style>.dropbtn{background-color:#4CAF50;color:white;padding:16px;font-size:16px;border:none;cursor:pointer;}.dropdown{position:relative;display:inline-block;}.dropdown-content{display:none;/*这个必须是none,也就是鼠标不放在div上,不会显示这部分内容*/position:absolute;background-color:#f9f9f9;min-width:160px;box-shadow:0px8px16px0pxrgba(0,0,0,0.2);}.dropdown-contenta{color:black;padding:12px16px;text-decoration:none;display:block;}.dropdown-contenta:hover{background-color:#f1f1f1}.dropdown:hover.dropdown-content{display:block;/*覆盖display:none;变成display:block;*/}.dropdown:hover.dropbtn{background-color:#3e8e41;}</style></head><body><h3>下拉菜单</h3><p>鼠标移动到按钮上打开下拉菜单。</p><divclass="dropdown"><buttonclass="dropbtn">下拉菜单</button><divclass="dropdown-content"><ahref="http://lvnian.blog.51cto.com/">教程1</a><ahref="http://lvnian.blog.51cto.com/">教程2</a><ahref="http://lvnian.blog.51cto.com/">教程3</a><ahref="http://lvnian.blog.51cto.com/">教程4</a></div></div></body></html>