关于下拉菜单显示不到
请问有那位大神可以请教下一下我的代码 是哪里的问题？ 为什么显示在 Home 哪里显示不到下拉菜单。。
<!DOCTYPE html>
<html>
<head>
<style>
#menu{
background-color: grey;
height:50px;
margin:0;
width:auto;
}
#menu > nav > ul{
list-style-type: none;
}
#menu > nav > ul > li > a{
text-decoration: none;
color: red;
font-size: 20px;
}
#menu > nav > ul > li {
position: relative;
display: inline-block;
padding:10px 20px;
margin-left: 20px;
}
#menu > nav > ul > li a:hover{
color: palegreen;
}
.lista:hover .m1{
display:block;
width:200px;
position: absolute;
left:1px;
}
.m1 ul,.m2 ul,.m3 ul{
list-style-type: none;
}
.m1 ul ,.m2 ul li,.m3 ul li{
display: none;
}
.m1 ul a,.m2 ul a,.m3 ul a{
text-decoration: none;
font-weight: bolder;
color: orange;
}
</style>
</head>
<body>
<div id="menu">
<nav>
<ul>
<li class="lista">
<a href="#">Home</a>
<div class="m1">
<ul>
<li><a href="#">About Us</a></li>
<li><a href="#">Login</a></li>
</ul>
</div>
</li>
<li>
<a href="#">Search</a>
<div class="m2">
<ul>
<li><a href="#">About Us</a></li>
<li><a href="#">Login</a></li>
</ul>
</div>
</li>
<li>
<a href="#">Matched Case</a>
<div class="m3">
<ul>
<li><a href="#">About Us</a></li>
<li><a href="#">Login</a></li>
</ul>
</div>
</li>
<li><a href="#">Media</a></li>
<li><a href="#">Feedback</a></li>
</ul>
</nav>
</div>
</body>
</html>
