How to CSS triangle at the bottom and center it in div ( Horizontal Menubar )? [closed]


Tags: html,css

Problem :

How to CSS triangle at the bottom and center it in div ( Horizontal Menubar )?

Menubar width is 100%;



Solution :

Add position:relative to your CSS for li

Demo Fiddle

li {
    display: table-cell;
    list-style: none;
    text-align: center;
    padding: 20px;
    color: black;
    font-size: 18px;
    position:relative; /* <-- this */
}

You may also want to revise some of the rest of your CSS thus:

#bar {
    width:100%;
    height: 100px;
}
li {
    list-style: none;
    text-align: center;
    padding: 20px;
    color: black;
    font-size: 18px;
    position:relative;
    display:inline-block; /* <-- make the items appear on the same row, you shouldnt be using displace:table-cell */
}
.btn.selected {
    color: black !important;
    font-size: 18px;
    background-color: #f7eee7;
}
.btn:hover:after {
    content:"";
    position: absolute;
    left:calc(50% - 9px); /* <-- ensure your triangles are centered */
    bottom: 0;
    width: 0%;
    height: 0;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-bottom: 9px solid black;
}

    CSS Howto..

    How can I size these spans so that the pictures don't extend past them?

    How to use CSS to create the left - right alignment so the left div does not push the right div

    CSS/Javascript: How to make rotating circular menu with multiple states?

    How to add your customise arrows in slick slider JS using CSS

    how to center anchor tag horizontally css

    How do you make this dogeared shape with css only

    How to create an interactive circular links using CSS [closed]

    How to use CSS filters in JavaScript?

    How to generate css using google chrome inspector to further use them?

    How to properly apply WinJS.Binding.Template ListView GridLayout CSS?

    How to Display a DIV with 'fixed' and 'inline-block' Added to its CSS Properties

    How to do Hanging Punctuation in HTML / CSS

    How to change this table layout to a css layout?

    how to let CMS make use of my css files instead of its own css?

    User agent, how to have diferent css files for diferent devices automaticly

    how to create multiple instance of a css class?

    how to hide html video controls in micorostf edge (fullscreen mode)

    How to style the tabs in primary menu links in a Drupal 7 subtheme?

    How to stop jitter of relatively placed items on scrolling with mouse?

    How do I change the font colour of text nested within a placeholder of an input search [duplicate]

    How do I use CSS to to vertically center align an image in a div?

    Print CSS: How do I open a new tab of the current page and append CSS?

    Stylized HR is not showing properly in IE

    using the unorthodox `head {display: block}` to show text to user?

    CSS Border Color: How to set bottom border color?

    css how to make two div side by side

    How to get Material-UI Drawer to 'squeeze' other content when open

    How to incorporate specific CSS files for Responsive Design for Desktop and Mobile Browsers

    How to design a cross client / browser compatible email?

    How do I add the date a blog post was created in place of a bullet point under list-style-type?