There is a menu in which when hovering over an item containing a drop-down list, it should appear in the center of a triangle, which is absolutely positioned relative to the parent. picture Question: how to place this triangle exactly in the center for any one of the width of the item is the same in all browsers (ask left in percent not to offer!)? Now it is located with an offset from the center. fiddle

ul { list-style: none; } .nav { background-color: #000; min-height: 50px; text-align: center; } .nav>li { position: relative; display: block; float: left; } .nav>li>a { position: relative; display: block; padding: 10px 15px; color: white; font-family: Arial; font-size: 16px; font-weight: 400; line-height: 1.9; text-decoration: none; } ul.dropdown-menu { background-color: white; overflow: hidden; opacity: 0; } ul.dropdown-menu a { display: inline-block; color: #000; text-decoration: none; padding: 10px; } ul.nav li.dropdown:hover > ul.dropdown-menu { display: block; overflow: visible; opacity: 1; } .navbar-nav>li:hover { background-color: #ffd900; } .navbar-nav>li.dropdown:hover { position: relative; } .navbar-nav>li.dropdown:hover:after { position: absolute; content: ""; top: 50px; z-index: 9999; display: inline-block; width: 0; height: 0; border-style: solid; border-width: 13px 16px 0 16px; border-color: #ffd900 transparent transparent transparent; line-height: 0; _border-color: #ffd900 #000000 #000000 #000000; _filter: progid: DXImageTransform.Microsoft.Chroma(color='#000000'); } 
 <ul class="nav navbar-nav top-menu"> <li><a href="#">Главная</a> </li> <li class="dropdown"><a href="#">О нас</a> <ul class="dropdown-menu"> <li><a href="#">О нас</a> </li> <li><a href="#">Контакты</a> </li> </ul> </li> <li><a href="#">Полезное</a> </li> </ul>

    4 answers 4

     ul.dropdown-menu { background-color: white; overflow: hidden; opacity: 0; margin:0; text-align:center; }

    You just need to add a margin: 0 and everything will be in the center

     .navbar-nav>li.dropdown:hover:after { position: absolute; content: ""; top: 50px; z-index: 9999; padding: 0; display: inline-block; width: 0; left: 0; right: 0; margin: 0 auto; height: 0; border-style: solid; border-width: 13px 16px 0 16px; border-color: #ffd900 transparent transparent transparent; line-height: 0; _border-color: #ffd900 #000000 #000000 #000000; _filter: progid: DXImageTransform.Microsoft.Chroma(color='#000000'); }

    And then add the left: 0; right: 0, margin:0 auto; left: 0; right: 0, margin:0 auto;

    • margin: 0 auto is centering, and margin: 0 is not. - Qwertiy ♦
    • @Qwertiy forgot to add text-aling: center; - Lieutenant Jim Dangle
    • one
      And text-aling: center with absolute without text is no longer very cross-browser. - Qwertiy ♦
    • @Qwertiy margin: 0; exclusively remove the indent of ul list, and text-align: center; center text, bad cross-browser compatibility? - Lieutenant Jim Dangle
    • Ugh .. I'm a little confused. I thought absolute inline-block is centered through text-align, and you still have a margin: 0 auto. - Qwertiy ♦

    add for .navbar-nav>li.dropdown:hover:after

     .navbar-nav>li.dropdown:hover:after{ left: 50%; margin-left: -16px; }
    • I do not like this option with left: 50%; margin-left: -16px; left: 50%; margin-left: -16px; - are you sure that it will be cross-browser, adaptive and replacing, for example a font or increasing its size, will not move anything? - Vasya
    • @ Vasya da sure - this is a cross-browser version, also the font does not play a role in this case - soledar10
    • and yet I trust when the browser itself calculates, rather than determine by itself. you should want to play around with the sizes of the triangle and each time you have to move it to watch it pixel-by-pixel if it’s not crookedly located - Vasya
    • one
      calculation for margin-left = - (width triangle / 2); - soledar10

    The offset occurs at half the width of the triangle. Return "in place" you can add this

     .navbar-nav>li.dropdown:hover:after { transform: translateX(-50%); }

    Ps. Legacy browser versions will require prefixes.

    • and for completely outdated ones (ie8) this, unfortunately, will not work .. - Vasya
    • @ Vasya It's true , but I wouldn’t count on it - tutankhamun

    Here is an example:

      ..li > a:after { content: ""; bottom: 0; left: 0; right: 0; margin: 0 auto; line-height: 0; position: absolute; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 0px solid #ffffff; width: 0px; height: 0px;

    This part is responsible for its central location: margin: 0 auto; I hope this example will help!

    • Yes, useful, but not complete - at the top is the surest answer - Vasya