[Solved] CSS Dropdown menu problem

[xam]

Hi,

I have a problem with positioning my submenu’s the right way. This is the page I’m currently working on: LINK.

Everything looks good on the ‘Portfolio’ button. But when I add subbuttons to other pages, e.g. the ‘Pers’ button, it aligns them on the position of the ‘Portfolio’ button. How can I make sure every subbutton aligns under the right main button?

HTML:

<ul id="menu">
    <li><a id="default" href="index.html">Home</a></li>
    <li><a href="#">Portfolio</a>
        <ul>
        <li><a href="#">Koetshuis Kesteren</a></li>
        <li><a href="#">Herenhuis Antwerpen</a></li>
        <li><a href="#">Villa Hoogstraten</a></li>  
        <li><a href="#">Winkel Zundert</a></li>
        </ul>
        </li>
    <li><a href="#">Merken</a></li>
    <li><a href="#">Pers</a>
        <ul>
        <li><a href="#">Sub button1</a></li>
        <li><a href="#">Sub button2</a></li>
        <li><a href="#">Sub button3</a></li>
        </ul>
         </li>
    <li><a href="#">Contact</a></li>
</ul>

CSS:
LINK

Thanks in advance!

[Paulie_D]

Could you please make a Codepen.io example of the problem with just enough HTML & CSS to show the issue?

Offhand though, I would guess that you haven’t added position:relative to the parent li

[xam]

@Paulie_D
The problem has already been solved, you were right as wel! Next time I’ll definitely make a Codepen.io example instead of dumping all of my code here.

@Soronbe
Exactly what I needed.

@Atelierbram
You were right as wel.

Thanks a lot guys!

[Author]

Posts