如何使我的引导子菜单可见

Question

在以下html中，我使用下面的CSS隐藏了子菜单：

<nav class="navbar navbar-light navbar-expand-md">
    <div class="container-fluid">
        <div class="collapse navbar-collapse" id="navcol-1">
            <ul class="nav navbar-nav main-menu">
                <li role="presentation" class="nav-item drop">
                    <a href="#" class="nav-link active">Home</a>
                    <ul class="dropdown">
                        <li><a href="index.html">Home 1</a></li>
                        <li><a href="index-2.html">Home 2</a></li>
                        <li><a href="index-3.html">Home 3</a></li>
                    </ul>
                </li>                    
            </ul>
        </div>
    </div>
</nav>

CSS隐藏子菜单：

.main-menu li.drop ul.dropdown {
  position: absolute;
  visibility: hidden;
}

要使子菜单悬停时可见，我使用以下CSS，但它不起作用：

.main-menu li.drop a:hover {
  visibility: visible;
}

我该如何解决？