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>