html菜单下拉怎么不显示,使用JS做下拉菜单，子菜单不显示

无标题文档

*{

margin: 0;

padding: 0;

}

a{

text-decoration: none;

}

#fa{

display: block;

width: 100px;

height: 30px;

line-height: 30px;

text-align: center;

background: green;

color: yellow;

}

#fa:hover{

background: orange;

color: black;

}

#son{

width: 100px;

list-style: none;

display: none;

}

ul a{

display: block;

width: 100px;

height: 30px;

background: #CCC;

line-height: 30px;

text-align: center;

border-bottom: 4px solid red;

color: green;

}

function in(){

var lo=document.getElementById('son');

if (lo.style.display==none)

{

lo.style.display='block';

}

else{

lo.style.display='none';

}

}

我是父目录

• 我是子目录
• 我是子目录
• 我是子目录

1、ul未使用定位不知道是否有关；

2、js初学，if的用法搞不懂对不对。

PS：0基础在家自学，不懂的没人指导，求指点！！！！