Question

导航栏上有以下代码：

 .Resources.showme {
  display: none;
}

.Resources:hover .showme {
  display: block;
}


    /* Add a black background color to the top navigation */
.topnav {
    background-color: #1d1e22;
    overflow: hidden;
    width:800px;
    float:right;
    padding-top:70px;
    font-weight:bold;
}

/* Style the links inside the navigation bar */
.topnav a  {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    border-bottom: 3px solid transparent;
}

.topnav a:hover {
    border-bottom: 3px solid white;
}

.topnav a.active {
    border-bottom: 3px solid white;
}

/* Style the links inside the navigation bar */
.topnav .Resources  {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    border-bottom: 3px solid transparent;
}

.topnav .Resources:hover {
    border-bottom: 3px solid white;
}

.topnav .Resources.active {
    border-bottom: 3px solid white;
}

<div class="topnav">
  <a id="Home"     runat="server"  href="~/Default.aspx">Home</a>
  <a id="Team"     runat="server"  href="~/Team.aspx">Team</a>
  <a id="Products" runat="server"  href="~/Products.aspx">Products</a>
    <div>
        <div class="Resources" runat="server" href="~/Products.aspx">
            Resources
        </div>
        <div class="showme" style="position:absolute">  
            <a id="A1" runat="server"  href="~/Products.aspx">Stock Images</a>
            <hr />
            <a id="A2" runat="server"  href="~/Products.aspx">Stock Images</a>
            <hr />
            <a id="A3" runat="server"  href="~/Products.aspx"> How-To's</a>
            <hr />
        </div>
    </div>

  <a id="Tools" runat="server"  href="~/Tools.aspx">Tools</a>
  <a id="Contact"  runat="server"  href="~/ContactUs.aspx">Contact</a>


</div>

但是我试图将div定位在“资源”下，使其直接显示在其下方，因此它的作用类似于下拉列表。当将鼠标悬停在div上时，div应该直接出现在白线的下面。

有什么技巧可以将其移动到白线下方吗？

Answer 1

您可以执行以下操作。您可能需要根据需要重新设置样式。但是，就下拉菜单而言，这应该起作用。 HTML：

<div class="Resources" runat="server" href="~/Products.aspx">
  <span>Resources</span>
  <div class="dropdown-content">
<a id="A1" runat="server"  href="~/Products.aspx">Stock Images</a><br>
<a id="A2" runat="server"  href="~/Products.aspx">Stock Images</a><br>
<a id="A3" runat="server"  href="~/Products.aspx"> How-To's</a>
  </div>
</div>

CSS：

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

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  padding: 12px 16px;
  z-index: 1;
}

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

有关更多信息，请查看here。如果您还有其他问题，请告诉我。

Answer 2

请注意，以下操作并不是很好的方法，但是在使用您已编写的代码解决该问题时，只需删除Resources Div周围的Div，然后将showme Div放入Resources Div。 / p>

 <div class="Resources" runat="server" href="~/Products.aspx">Resources
    <div class="showme" style="position:absolute">  
        <a id="A1" runat="server"  href="~/Products.aspx">Stock Images</a>
        <hr />
        <a id="A2" runat="server"  href="~/Products.aspx">Stock Images</a>
        <hr />
        <a id="A3" runat="server"  href="~/Products.aspx"> How-To's</a>
        <hr />
    </div>
</div>

那是目前的快速解决方案。启用下拉菜单时，请注意导航上的隐藏溢出，因为它将隐藏下拉菜单：

.topnav {
overflow: hidden;
}

导航栏的div位置

2 个答案: