为什么我这样改用的js没有实现？

原css代码

#dropdown:hover #dropdown-list {
    display: block;
}

我该用的原生JS代码

var onMainbtn0 = document.getElementById("dropdown-dropbtn0");
var onMainbtn1 = document.getElementById("dropdown-dropbtn1");
var onMain_target0 = document.getElementById("dropdown-list0");
var onMian_target1 = document.getElementById("dropdown-list1");
function onMain(){
    onMainbtn0.onmouseover = function(){
        onMain_target0.style.display = "block";
    }
    onMainbtn1.onmouseover = function(){
        onMain_target1.style.display= "block";
    }
    onMainbtn0.onmouseout = function(){
        onMian_target1.style.display="none";
    }
    onMainbtn1.onmouseout = function(){
        onMian_target0.style.display="none";
    }
}

这里是html中部分代码

<div id="guilde-dropdown">
    <button id="dropdown-dropbtn0">按钮1</button>
    <button id="dropdown-dropbtn1">按钮2</button>
</div>
<div id="dropdown-list">
    <div id="dropdown-list0">
        <a href="javascript:void(0)">下拉1</a>
    </div>
    <div id="dropdown-list1">
        <a href="javascript:void(0)">下拉1'</a>
    </div>
</div>

实现的功能：接触下拉菜单：鼠标移动到按钮显示下拉菜单

下拉菜单的内容开始时隐藏(display:none)