效果如下：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body,ul,li {padding: 0;margin: 0;}ul {height: 50px;background-color: bisque;}li {list-style: none;display: inline-block;width: 100px;line-height: 50px;text-align: center;position: relative;}div {position: absolute;display: none;}div a {display: inline-block;width: 100px;height: 50px;line-height: 50px;text-decoration: none;background-color: rgb(253, 255, 241);}div a:hover {background-color: rgb(238, 150, 168);}img {vertical-align:middle;width: 20px;height: 20px;}</style></head><body><ul><li>下拉1 <img src="../images/下拉框.png"><div><a href="#">1</a><a href="#">1</a><a href="#">1</a></div></li><!--注释空白--><li>下拉2 <img src="../images/下拉框.png"><div><a href="#">2</a><a href="#">2</a><a href="#">2</a></div></li><!--注释空白--><li>下拉3 <img src="../images/下拉框.png"><div><a href="#">3</a><a href="#">3</a><a href="#">3</a></div></li><!--注释空白--><li>下拉4 <img src="../images/下拉框.png"><div><a href="#">4</a><a href="#">4</a><a href="#">4</a></div></li><!--注释空白--><li>下拉5 <img src="../images/下拉框.png"><div><a href="#">5</a><a href="#">5</a><a href="#">5</a></div></li></ul><script>var lis =document.querySelectorAll("li");for (var i=0;i<lis.length;i++){lis[i].onmouseover = function(){this.children[1].style.display = "block";this.style.backgroundColor = "red";}lis[i].onmouseout = function(){this.children[1].style.display = "none";this.style.backgroundColor = "bisque";}}</script><h1>下拉菜单测试</h1></body></html>
