The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS CSS How to center drop-down menu under navigation button with position:absoltute

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #284602

    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.


    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.


    If 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%);


    This 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.


    This is a bug in chrome, try 50.1% or 51%

    left: 51%;
    transform: translateX(-51%);


    Thank you very much. Very helpful information.


    I’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 What do you think, friends? Who collaborated?

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.