Home › Forums › CSS › CSS How to center drop-down menu under navigation button with position:absoltute
- This topic is empty.
-
AuthorPosts
-
March 13, 2019 at 5:35 pm #284602Alexander_24Participant
I'm a beginner (very inexperienced currently) in web design and styling.
I made a page with simple navigation bar in the header. The nav bar contains a <ul> which forms the group / block around the main items. Inside there are <li> with <a> elements for the links. In this example, the second item isn't a link, but a dummy button which opens drop-down menu on hover.
The drop-down menu has a parameter position:absolute so that it doesn't interfere with or change the size of the nav bar.
My question is simple: How could I center the drop-down menu relative to the hover button on top (its parent element)?I've tried text-align:center, display:table, display:flex with justify-content:center, but these don't work in this situation.
JSFiddle
I'd like to make something like this:
Or this (in case the sub-items are long):
Edit: Those screenshots are simluated with margin and are not useful when adding content in the future, changing resolutions, etc.
March 13, 2019 at 6:23 pm #284603ShikkedielParticipantIf you’re using absolute positioning, you want to give the parent relative positioning or it will position itself based on the closest parent that has been relatively positioned (or window if none have).
I think this is the most comprehensive way to center:
left: 50%; transform: translateX(-50%);
March 14, 2019 at 1:54 am #284631Alexander_24ParticipantThis seems to work reliably for positioning, but not for rendering. The side border lines are blurry in almost all cases, beccause they are in-between pixels. (Even with fixed width or zoomed-in/out page)
Could there be other options for centering the menu in this case?
Nevertheless, thanks for the suggestion.
March 14, 2019 at 5:43 am #284648chris_2080ParticipantThis is a bug in chrome, try 50.1% or 51%
left: 51%;
transform: translateX(-51%);
March 15, 2019 at 10:42 am #284821BladebringerParticipantThank you very much. Very helpful information.
March 16, 2019 at 4:56 am #284926karizmaParticipantI’m just looking for guys or a company who, with high quality, fast and bright, will be able to design my business site. A friend advised to contact https://gapsystudio.com/service/web-design/ What do you think, friends? Who collaborated?
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.