Currently, I am in the process of creating a CSS dropdown menu.
The main dropdown (the first ul) has a position set to relative, while the second dropdown has its position as absolute.
However, using absolute causes this issue:
On the other hand, setting it to relative results in:
Here is the HTML markup:
<li class='active has-sub'>
<a href="#">
<div class="profile">
<img src="images/avatar.png" /> <span>Josh</span> <img src="images/arrow-down-dark.png" class="arrow_down" /><br />
</div>
</a>
<ul>
<li><a href="#"><span>Opt 1</span></a></li>
<li><a href="#">Opt 2</a></li>
<li><a href="#">Opt 3</a></li>
<li class='last'><a href="#">Log out</a></li>
</ul>
</li>
And here is the corresponding CSS code:
#cssmenu ul,
#cssmenu li,
#cssmenu span,
#cssmenu a {
margin: 0;
padding: 0;
position: relative;
z-index: 99;
}
(... CSS continues ...)
** UPDATE **
Ochi requested more code related to the menu, so I will include all relevant CSS code below:
#cssmenu ul,
#cssmenu li,
#cssmenu span,
#cssmenu a {
(.. additional CSS code ..)
Additionally, here is the HTML markup for the menu with the navigation bar below:
<header>
(.. HTML code for header and nav section ..)
</header>
When utilizing relative positioning, the content layout appears like this:
However, the initial design looks like this: