悬停下拉菜单

Question

我还在学习编程。 我的问题是如何在悬停时显示下拉菜单？ 我有这个 html 代码：

<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

如果您只想使用 CSS，那么您可以使用如下列表项来完成，您需要添加更多 CSS 以使其按照您想要的方式进行布局：

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

以下示例为您提供了更多详细信息，包括一些额外的 CSS 以使其看起来不错： https : //codepen.io/andornagy/pen/xhiJH