Positioning of dropdown a header navbar

HTML & CSS
#1

I’m somewhat new to coding CSS, and as an exercise, am trying to make a navigation-bar for a site. Much of the code works, but I can’t figure out how to place the submenu where I want. I would like it to show just under the bottom border of the parent element, similar to how this is done in a w3schools example.

But I can’t figure out how to do this. With the code I have, the submenu is appearing dead center covering the parent element. I’ve tinkered a bit with relative positioning, but when I do so, the contents of the admin-nav-item > a content becomes pushed to the left. I was hoping to use flexbox for the main elements for the easy centering of the text. But that is perhaps where it becomes difficult to follow the w3schools example, as they use UL/LI and display:inline-block or block.

The WordPress site that I’m emulating – I’ve looked at the page source with my browser’s Development Tool / Inspector and Style Editors to try and piece together what the original coder did. But the coding looks pretty crazy, with many classes attached that don’t seem to exist and a number of style sheets that cancel each other out in places all in play. Maybe I should have stuck with the UL/LI structure for the top level instead of flexbox, but I’m unclear on how the centering of the text would be done in that case, vertically.

Any suggestions?
I’m sure part of the issue is that I am new to this and a bit overwhelmed by the number of alternatives.
Many thanks!

<html>
<head>
  <meta charset="UTF-8">
  <style>
    /* container for main nav items */
    .admin-nav-row {
      margin: 50 0 0 0;
      padding: 0;
      box-sizing: border-box;
      font-family: sans-serif;
      font-size: 13;
    	display: flex;
    	justify-content: center;
      flex-flow: wrap;
    }

    /* main nav items, default appearance */
    .admin-nav-row > .admin-nav-item {
      display: flex;
      justify-content: center;
      position: relative;
      align-items: center;
      text-align: center;
      border: 2px solid #8dc63f;
    	padding: 10px;
      margin-left: 2px;
      margin-right: 2px;
      margin-top: -2px;
      width: 104px;
      height: 20px;
    	background-color: #f9f9f9;
    }
    .admin-nav-row > .admin-nav-item > a {
      text-decoration: none;
      color: #000;
    }

    /* Section for main item highlighting */
    .admin-nav-row > .admin-nav-item:hover {
      background-color: #8dc63f;
      position: relative;
    }
    .admin-nav-row > .admin-nav-item:hover > a {
      color: #fff;
    }

    /* submenu container */
    .admin-nav-row > .admin-nav-item > .dropdown-content {
      display: none;
      position: absolute;
      /* position: relative;
      top: 40px; */
      background-color: #f9f9f9;
      min-width: 200px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      z-index: 1;
    }
    .admin-nav-row > .admin-nav-item > .dropdown-content > a {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
      text-align: left;
      border: 2px solid #8dc63f;
    }

    /* Section for display of submenu items */
    .admin-nav-row > .admin-nav-item:hover > .dropdown-content {
      display: block;
    }
    .admin-nav-row > .admin-nav-item > .dropdown-content a:hover {
      color: #f9f9f9;
      background-color: #8dc63f;
    }
  </style>
</head>

<body>
	<nav class="admin-nav-row">
    <div class="admin-nav-item">
  		<a href="">LOCATIONS</a>
      <div class="dropdown-content">
        <a href="">PHILADELPHIA</a></li>
        <a href="">VERMONT</a></li>
      </div>
    </div>
    <div class="admin-nav-item">
      <a href="">SERVICES</a>
      <div class="dropdown-content">
        <a href="">OUR SERVICES</a>
        <a href="">FOUNDER</a>
        <a href="">SKIN BEAUTY TIPS</a>
      </div>
    </div>
    <div class="admin-nav-item">
      <a href="">ACNE STOP TREATMENT</a>
      <div class="dropdown-content">
        <a href="">TREATMENTS</a>
        <a href="">ACNE TIPS</a>
        <a href="">CLOGGING INGREDIENTS</a>
      </div>
    </div>
    <div class="admin-nav-item">
      <a href="">BEFORE AND AFTER</a>
    </div>
    <div class="admin-nav-item">
  		<a href="">TESTIMONIALS</a>
    </div>
    <div class="admin-nav-item">
  		<a href="">PUBLICATIONS</a>
    </div>
    <div class="admin-nav-item">
  		<a href="">VIDEOS</a>
    </div>
    <div class="admin-nav-item">
  		<a href="">BLOG</a>
    </div>
	</nav>
</body>
</html>
#2

I see you’ve commented out the top position of the dropdown-content. That means an auto position.

Try give it a position 100% from the parent’s top, i.e:
top :100%;
This is the common way to position the dropdown.

(The w3schools is not the most accurate source for a dev. I prefer Mozilla Dev who also has some hands on examples.)

2 Likes
#3

That worked perfectly! Thank you.

I agree about preferring the Mozilla material. I’m much more likely to get an understanding of what is going on from Mozilla than any other source I’ve found so far.

1 Like