                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /形形色色的下拉菜单

margin-top为什么没有效果

老师好，同学们好。请教一下为什么我鼠标hover至a时没有上移40px？

.top{border-bottom:8px solid #c00;overflow:auto;}
.top_nav li{float:left;line-height:40px;width:100px;text-align:center;}
.top_nav li a{text-align:center;width:100px;}
.top_nav li a span{display:none;}
.top_nav li a:hover span{display:block;background:#c00;color:#fff;}
.top_nav li a:hover{margin-top:-40px;}/*上移40px*/