Trying to incorporate a dropdown menu into my website, I am structuring the HTML as follows:
<ul class="topnav">
<li>
SECTION TITLE
<ul class="subnav">
<li>One</li>
<li>Two</li>
</ul>
</li>
</ul>
The CSS code for this setup is as follows:
header ul.topnav li ul.subnav {
position: absolute;
left: 0;
top: 35px;
background: blue;
margin: 0;
padding: 0;
display: none;
float: left;
width: 16%;
border: 1px solid black;
}
Although successful in getting the jQuery function to animate the submenu, there is an issue with its styling. The dropdown menu emerges at the far left of the screen instead of sliding down from beneath the SECTION TITLE. For further reference and visualization, visit my website: link here (the menu is positioned at the top; hover over elements to view the sub-menu).
Due to the use of position: absolute, the placement of the ul.subnav should be relative to its parent element, specifically the li enclosing SECTION TITLE. Unfortunately, it appears that the positioning of the ul.subnav is connected to the top left corner.