时间戳

首页 > 解决方案 > HTML & CSS - 你如何创建一个下拉菜单？

html - HTML & CSS - 你如何创建一个下拉菜单？

问题描述

我有以下 HTML：

<div class="MenuContainer">
    <div class="Menu">
        <div class="MenuContents">
            <ul>
                <li><a id="index" href="index.html">Home</a></li>
                <li><a id="gamePage" href="gamePage.html">Game</a></li>
                <li><a id="gameDesignPage" href="gameDesignPage.html">Game Design</a></li>
                <li><a id="devRolesPage" href="devRolesPage.html">Developer Roles</a></li>
                <li class="float-right"><a id="about" href="about.html">About</a></li>
            </ul>
        </div>
    </div>
</div>

如何使 ID 为“gameDesignPage”的列表项有一个下拉菜单？下拉菜单将作为此链接中的一个：https ://www.w3schools.com/css/tryit.asp?filename=trycss_dropdown_button

我已经尝试过其他类似堆栈溢出问题的解决方案（以及上述逻辑的链接），但它们在我的结构上无法正常工作。

标签： htmlcssdrop-down-menu

解决方案

尽管您实际上并不需要将下拉触发器放入列表中，然后将下拉菜单放入嵌套列表中 - 我发现在父可见的 li 中由嵌套隐藏列表组成的自包含下拉组件更简洁列表。

您创建一个嵌套列表，其中包含 display: none ，然后在父 li 悬停时 - 将 display:block 样式应用于子 ul。子 ul 可以简单地直接显示在 li 内容下（即没有样式），但为了让它更性感一点 - 我将下拉菜单设置为绝对定位在 li 内容的悬停之后。

以下允许嵌套 ul 在将鼠标悬停在父 li / 按钮上时可见 *注意按钮及其样式来自列出的 w3 页面 - https://www.w3schools.com/css/tryit.asp?filename= trycss_dropdown_button )

我还删除了该解决方案不需要的几层嵌套 div。

.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropdown-menu {
 list-style: none
}

.dropdown-menu-item {
 position: relative
}

.dropdown-menu-list {
 display: none;
 border: solid 1px #e1e1e1;
 background: #fff;
 position: absolute;
 left: 0;
 top: 50px;
 padding:0;
 list-style: none
}

.dropdown-menu-list-item {
 background: #fff;
 padding:  8px 16px;
}
.dropdown-menu-list-item:hover {
 background: #fafafa;
}


.dropdown-menu-list-item  a,
.dropdown-menu-list-item:hover a{
 text-decoration: none;
 display: block;
 cursor: pointer
}

.dropdown-menu:hover .dropdown-menu-list ,
.dropdown-menu-item:hover .dropdown-menu-list:hover{
 display: block;
}
<div class="menu-container">
  <ul class="dropdown-menu"> 
    <li class="dropdown-menu-item">
      <button class="dropbtn">Dropdown</button>
      <ul class="dropdown-menu-list">
        <li class="dropdown-menu-list-item"><a id="index" href="index.html">Home</a></li>
        <li class="dropdown-menu-list-item"><a id="gamePage" href="gamePage.html">Game</a></li>
        <li class="dropdown-menu-list-item"><a id="gameDesignPage" href="gameDesignPage.html">Game Design</a></li>
        <li class="dropdown-menu-list-item"><a id="devRolesPage" href="devRolesPage.html">Developer Roles</a></li>
         <li class="dropdown-menu-list-item" class="float-right"><a id="about" href="about.html">About</a></li>
       </ul>
     </li>
   </ul>    
</div>

推荐阅读