Dropdown menu on hover

Question

I'm still learning to programme. My questions is how to make dropdown visible on hover? I have this html code:

<nav class="nav nav-pills nav-fill">
        <a class="nav-item nav-link active" href="#">Начало</a>
        <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
                aria-haspopup="true" aria-expanded="false">
                Мъжки дрехи</a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                <a class="dropdown-item" href="#">Тениски</a>
                <a class="dropdown-item" href="#">Ризи</a>
                <a class="dropdown-item" href="#">Дънки</a>
                <a class="dropdown-item" href="#">Блузи</a>
                <a class="dropdown-item" href="#">Официални облекла</a>

            </div>
        </li>

Answer 1

If you want to use just CSS then you can do it using list items as follows, you will need to add more CSS to get it to layout how you want:

    <ul class="menu">
      <li><a href='somelink'>Parent menu item</a></li>
      <li><a href='somelink'>Parent menu item with sub menu</a>
         <ul>
           <li><a href='somelink'>Sub item 1</a></li>
           <li><a href='somelink'>Sub item 2</a></li>
         </ul>
    </li>

<style>
    .menu li ul {
      display:none;
    }

    .menu li:hover ul {
      display:block;
    }

</style>

The following example give you more details including some of the extra CSS to make it look nice: https://codepen.io/andornagy/pen/xhiJH