Как сделать, чтобы моё подменю начальной загрузки было видимым

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;
}

Как мне это исправить?