Drop down menu styling problem

[Geldon]

Here’s a link to the relevant problem:

http://codepen.io/Dione/pen/hJezm

I am trying to get three things to happen.

1) I want the Login link to display a drop down where each link (link1, link2) is in its own block. Currently, they are inline. I am not sure how to select them.

2) I want the login links (link1, link2) to be positioned under the Login link rather than what appears to be left-aligned.

3) I want the resulting drop down to “go over” (sorry, bad terminology from me), or be positioned on top of the login-option-container div, rather than expanding it.

Thoughts on how to get this to happen?

[Geldon]

Yeah, I was looking for a CSS-only solution (I was trying to build one without javascript myself), but thanks for giving it a go anyway.

[Paulie_D]

I think this is what you had in mind

Firstly, we need to clear floats on the wrapping container so I added float:left and width:100% as a quick clearfix.

Given what we are trying to do, overflow:hidden would not have been appropriate.

Then we need to ensure that the submenus are positioned absolutely below the parent li and to do that we need to ensure that the parent li has position:relative.

I threw in a red border on the wrapper so that you can see it’s not expanding.

http://codepen.io/Paulie-D/pen/sEjBc

[Paulie_D]

As for reduced case examples this is one of my favourites that I keep around…there’snot a huge amount of ‘styling’ but its fairly well commented so that it sort of explains what it’s doing as we go along.

Also no floats.

http://codepen.io/Paulie-D/pen/FaBco

[Author]

Posts