Can an element be positioned horizontally in relation to one element and vertically to another using only CSS? I am attempting to include a dropdown menu in my navbar. However, the submenu is not aligning correctly. I want to position element A so that its left edge aligns with element B's left edge, but I want element A's top edge to align with element C's bottom edge.
In essence, I want it positioned under the header, aligned with a list element (image edited):
I have the following code:
#header{
padding: 0.125em;
background: #eee; /* Styling for clarity */
}
nav{
display: inline; /* Makes nav inline */
}
h1{
display: inline; /* Makes the main title inline */
}
#header ul{
padding:0; /* Clears the space around the list */
display: inline; /* Makes lists inline */
}
#header li{
display: inline; /* Makes list items inline */
list-style-type: none; /* Removes bullets */
}
#header ul>li>.submenu>li{
display: block; /* Makes submenu list items behave normally */
}
#header ul>li>.submenu{
display: none; /* Hides the submenu */
position: absolute; /* Enables positioning */
top: 100%; /* Position directly under - SHOULD BE UNDER HEADER */
left: 0; /* Align left edge - SHOULD BE ALIGNED WITH ANCESTOR LIST ITEM */
background: #ccc; /* Styling for clarity */
}
#header ul>li:hover>.submenu{
display: block; /* Shows the submenu */
}<header id="header">
<nav>
<ul>
<li>
<a>
<h1>
<img>TITLE
</h1>
</a>
</li>
<li>
<a>PAGE</a>
</li>
<li>
<a>PAGE</a>
<ul class="submenu">
<li><a>PAGE</a></li>
<li><a>PAGE</a></li>
<li><a>PAGE</a></li>
</ul>
</li>
<li>
<a>PAGE</a>
</li>
</ul>
</nav>
</header>To achieve the desired positioning, I need to select the element relative to which the positioning will be done. However, if I do this with the list element, the submenu will be too high up because it is positioned under the list element, and the header has some padding.
#header li {
position: relative; /* Positioning will be relative to the ANCESTOR LIST ITEM */
}
#header{
padding: 0.125em;
background: #eee; /* Styling for clarity */
}
nav{
display: inline; /* Makes nav inline */
}
h1{
display: inline; /* Makes the main title inline */
}
#header ul{
padding:0; /* Clears the space around the list */
display: inline; /* Makes lists inline */
}
#header li{
display: inline; /* Makes list items inline */
list-style-type: none; /* Removes bullets */
position: relative; /* Positioning will be relative to the ANCESTOR LIST ITEM */
}
#header ul>li>.submenu>li{
display: block; /* Makes submenu list items behave normally */
}
#header ul>li>.submenu{
display: none; /* Hides the submenu */
position: absolute; /* Enables positioning */
top: 100%; /* Position directly under - SHOULD BE UNDER HEADER */
left: 0; /* Align left edge - SHOULD BE ALIGNED WITH ANCESTOR LIST ITEM */
background: #ccc; /* Styling for clarity */
}
#header ul>li:hover>.submenu{
display: block; /* Shows the submenu */
}<header id="header">
<nav>
<ul>
<li>
<a>
<h1>
<img>TITLE
</h1>
</a>
</li>
<li>
<a>PAGE</a>
</li>
<li>
<a>PAGE</a>
<ul class="submenu">
<li><a>PAGE</a></li>
<li><a>PAGE</a></li>
<li><a>PAGE</a></li>
</ul>
</li>
<li>
<a>PAGE</a>
</li>
</ul>
</nav>
</header>This is the result: aligned with list element
If I use the header as the reference for positioning, the submenu will align with the left of the entire header, which is not what I desire.
#header {
position: relative; /* Positioning will be relative to the HEADER */
}
#header{
padding: 0.125em;
background: #eee; /* Styling for clarity */
position: relative; /* Positioning will be relative to the HEADER */
}
nav{
display: inline; /* Makes nav inline */
}
h1{
display: inline; /* Makes the main title inline */
}
#header ul{
padding:0; /* Clears the space around the list */
display: inline; /* Makes lists inline */
}
#header li{
display: inline; /* Makes list items inline */
list-style-type: none; /* Removes bullets */
}
#header ul>li>.submenu>li{
display: block; /* Makes submenu list items behave normally */
}
#header ul>li>.submenu{
display: none; /* Hides the submenu */
position: absolute; /* Enables positioning */
top: 100%; /* Position directly under - SHOULD BE UNDER HEADER */
left: 0; /* Align left edge - SHOULD BE ALIGNED WITH ANCESTOR LIST ITEM */
background: #ccc; /* Styling for clarity */
}
#header ul>li:hover>.submenu{
display: block; /* Shows the submenu */
}<header id="header">
<nav>
<ul>
<li>
<a>
<h1>
<img>TITLE
</h1>
</a>
</li>
<li>
<a>PAGE</a>
</li>
<li>
<a>PAGE</a>
<ul class="submenu">
<li><a>PAGE</a></li>
<li><a>PAGE</a></li>
<li><a>PAGE</a></li>
</ul>
</li>
<li>
<a>PAGE</a>
</li>
</ul>
</nav>
</header>This is how it appears: under header
Therefore, I aim for "top: 100%;" to be related to the whole header and "left: 0;" to be linked to the list element where the submenu is nested.
I hope my inquiry was comprehensible. Since this is my first question here, I apologize for any limitations regarding images or additional links due to lack of reputation.
Thank you for taking the time to consider my question. I look forward to a prompt resolution!