I am working on a project for school and am trying to add a drop down menu to my head navigation. I am still pretty new to css but had fun playing with the styling to get an interesting alignment that would work with the vision I had for the page (this is part of a larger piece that I didn't include to keep it relevant to the question)
I wanted to create a right aligned menu that was set to the bottom of the head div. I got everything to work by using absolute positioning but now that I am trying to add a fancy multi level drop down menu things aren't working. I have tried combinations of inline block and relative and absolute positioning but the dropdown does not align correctly. It just bunches up at the bottom offset to the right.
When I try styling the nav bar like people do in tutorials it gets messed up when I remove the absolute positioning.
Is there a way to get the dropdown to work with the current method of styling? I don't have any hover effects or visibility yet because I can't even get it lined up! That part should be pretty straight forward for the dropdown and submenus.
and probably more importantly
Is there a better way to accomplish this visual goal? (right-aligned at the bottom of the white div)
This is not a dynamic styling yet so you have to stretch the viewport for it to make sense.
/*====================================MAIN=================================*/
body {
background-color: #d5d3d5;
font-family: 'Gill Sans', 'Gill Sans MT', 'Calibri', 'Trebuchet MS', sans-serif;
margin: 0px;
padding: 0px;
}
.flex_body {
background: linear-gradient(90deg, rgba(255, 255, 255, .0), rgba(255, 255, 255, 1) 20%);
display: flex;
margin: 0px;
padding: 0px;
height: 800px;
}
.page_body {
background: linear-gradient(90deg, rgba(255, 255, 255, .0), rgba(255, 255, 255, 1) 15%);
margin: 0px 0px 0px 30px;
padding: 0px 0px 0px 20px;
height: 800px;
overflow: hidden;
}
/*=============================MAIN=NAVIGATION=================================*/
#header {
background-color: #ffffff;
height: 130px;
margin: 0px;
padding-bottom: 0px;
position: relative;
box-shadow: inset 0px -15px 18px -6px rgba(121, 104, 124, 0.678);
}
#headNAV ul {
list-style-type: none;
position: absolute;
text-align: right;
bottom: 0;
right: 0;
margin: 8px;
}
#headNAV ul li {
display: inline;
position: relative;
font-size: 18px;
padding: 5px 0px 15px 0px;
margin: 0px 0px 0px -5px;
}
#headNAV ul li:not(:last-child) {
border-right: 1px solid #8f85a1dc;
}
#headNAV ul li a {
display: inline-block;
padding: 5px 40px 10px 40px;
margin: 0px 0px -2px 0px;
text-decoration: none;
color: #353138;
}
#headNAV ul li a:hover {
background-color: #50328ddc;
color: white;
text-decoration: underline;
box-shadow: 0px 5px 3px 1px #50328ddc;
}
#search_icon {
max-width: 5%;
max-height: 5%;
margin: 0px;
padding: 0px;
display: inline;
}
#headNAV ul li input {
margin: 5px 35px 10px 35px;
}
/*======================myPage-Nav============================*/
#myPage_button:hover>#myPage {
color: white;
}
#myPage_button {
text-decoration: underline;
}
#myPage {
color: #50328ddc;
font-size: 22px;
font-weight: bold;
text-decoration: underline;
}
#dropdown-btn {
padding: 0px 10px;
}
#myPage-menu {
margin: auto;
}
#headNAV ul li #myPage-menu li {
position: absolute;
background-color: #fff;
display: inline-block;
padding: 0px;
border: none;
}<header id="header">
<nav id="headNAV">
<ul>
<li><a href="#">Mission</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">Forums</a></li>
<li><a id='myPage_button' href="#">My<span id='myPage'>Page</span><span id = "dropdown-btn" class="fas fa-caret-down"></span></a>
<ul id="myPage-menu">
<li><a href="#">Main Feed</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Messages</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Search</a></li>
</ul>
</li>
<li><input type="text" name="search" placeholder="Search..."></li>
<li><a id="header_login" href="#">Login/SignUp</a></li>
</ul>
</nav>
</header>Thank you for any input!
- Kevin