Forums

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
    Posts
  • #284602
    Alexander_24
    Participant

    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.

    #284603
    Shikkediel
    Participant

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

    jsfiddle.net/jwasxrgy

    #284631
    Alexander_24
    Participant

    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.

    #284648
    chris_2080
    Participant

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

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

    #284821
    Bladebringer
    Participant

    Thank you very much. Very helpful information.

    #284926
    karizma
    Participant

    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 https://gapsystudio.com/service/web-design/ 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.