Question

如何在垂直菜单中添加带有选项的子菜单？

这是HTML菜单代码

<div class="vertical-menu">
<a href="@Url.Content("~/Home/Noticia")">Notícias</a>
<a href="@Url.Content("~/Home/EstruturaInterna")">Estrutura Interna</a>
<a href="@Url.Content("~/Home/Contact")">Contactos</a>
<a href="#">Utilitários</a>
<a href="#">Repositório de Documentos</a>
</div>

Answer 1

<div class="vertical-menu">
 <button class="dropbtn">Home</button>
<div class="vertical-menu-content">
  <a href="@Url.Content("~/Home/Noticia")">Notícias</a>
  <a href="@Url.Content("~/Home/EstruturaInterna")">Estrutura Interna</a>
  <a href="@Url.Content("~/Home/Contact")">Contactos</a>
 </div>
</div>
  <a href="#">Utilitários</a>
  <a href="#">Repositório de Documentos</a>

这将是您的html。而且您的CSS或样式会像这样

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

.dropdown {
  position: relative;
  display: inline-block;
 }

.dropdown-content {
 display: none;
 position: absolute;
 background-color: #f1f1f1;
 min-width: 160px;
 box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
 z-index: 1;
 }

 .dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  }

 .dropdown-content a:hover {background-color: #ddd;}

 .dropdown:hover .dropdown-content {display: block;}

 .dropdown:hover .dropbtn {background-color: #3e8e41;}

访问此网站有很大帮助：https://www.w3schools.com/howto/howto_css_dropdown.asp

垂直菜单选项中的子菜单

1 个答案: