Position div for navigational bar

Question

I have the following code for my navigational bar:

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

But i am trying to position the div under "resources" to appear directly underneath so it acts like a dropdown list. the div should appear directly underneath the white line when hovered over.

Any tips on the positioning to move it right underneath so it is underneath the white line?

Answer 1

Be aware that the following is not the nice way of doing it but when solving it with the code you already written, you just need to remove the Div around the Resources Div and then put your showme Div into the Resources Div.

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

Thats the quick fix for now. When having the dropdown working, also be careful about the hidden overflow on your navigation since it will hide the dropdown menu:

.topnav {
overflow: hidden;
}

Answer 2

You can do something like this. You may have to restyle this according to your needs. But this should work as far as dropdown is concerned. 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;
}

For more info look here. Let me know if you have more questions.