软件用的hbuilder
鼠标放在下拉菜单上自动显示下拉菜单内容，
…
参考代码
<!doctype html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta charset="UTF-8" />
<style type="text/css">
#menu,#menu ul {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu:after {
content:"";
display: block;
clear: both;
}
#menu>li {
position: relative;
width: 100px;
height: 20px;
float: left;
background-color: #9ff;
transition: background-color 300ms;
}
#menu>li:hover {
background-color: #9cf;
}
#menu>li>ul {
position: absolute;
min-width: 100%;
top: 100%;
background-color: #cff;
max-height: 0px;
overflow: hidden;
opacity: 0;
transition: all 600ms;
}
#menu>li:hover>ul {
max-height: 120px;
opacity: 1;
}
#menu>li li:hover {
background-color: #99f;
}
</style>
</head>
<body>
<ul id="menu">
<li>菜单1
<ul>
<li>子菜单1-1</li>
<li>子菜单1-2</li>
<li>子菜单1-3</li>
<li>子菜单1-3</li>
</ul>
</li>
<li>菜单2
<ul>
<li>子菜单2-1</li>
<li>子菜单2-2</li>
<li>子菜单2-3</li>
</ul>
</li>
</ul>
</body>
</html>