如何在实体框架模板上制作下拉菜单答案

【问题标题】：How to make a dropdown menu on an Entity Framework template如何在实体框架模板上制作下拉菜单
【发布时间】：2021-07-20 15:21:18
【问题描述】：

我正在尝试为我正在开发的这个网站创建一个下拉菜单。它应该是简单的编码，因为它是在 Html 和 CSS 上的，但我所做的却不起作用。当我将鼠标悬停在应该激活下拉菜单的文本上时，它根本不显示。

HTML

<div class="dropdown-menu" id=" el_pepe">
  <ul class="nav navbar-nav">
    <li> @Html.ActionLink("maderas", "Productos", "tblProductos") </li>
  </ul>
</div>

CSS

#el_pepe {
    visibility: hidden;
    float: left;
    text-decoration: none;
    box-sizing: border-box;
}

#el_pepe *:hover {
    visibility: visible;
}

【问题讨论】：

我认为这个问题与 entity-framework 或 asp.net-mvc 无关，考虑删除#

标签： html css asp.net-mvc entity-framework

【解决方案1】：

我不认为您可以悬停隐藏元素，您可能只需要隐藏子元素并触发父元素上的悬停

喜欢

#el_pepe ul li div {
    visibility: hidden;
}

#el_pepe ul li:hover div {
    visibility: visible;
}

但我不确定您要达到什么目标，请多解释一下您的目标。

同时删除你 id 上的空格

让我假设 el_pepe 是一个 <div>，它有一个汉堡包图标或类似的东西，而你的 <ul> 是隐藏的菜单，那么你必须只隐藏 <ul>

类似的东西

#el_pepe ul.nav.navbar-nav {
    visibility: hidden;
}

#el_pepe:hover ul.nav.navbar-nav{
    visibility: visible;
}

这里有一个例子： css menu

【讨论】：

【解决方案2】：

我认为div class="dropdown-menu" 应该归于ul class="nav navbar-nav"，而不是相反，因为您使用的是引导类。

如果 html 结构是固定的，您可以按如下方式从 CSS 中打开悬停下拉菜单。

.dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0;
 }

这应该是html结构

    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
          </ul>
        </li>
      </ul>
    </div>

这是一个有效的引导程序 v4 example 和 v3 example。

【讨论】：