CODEWITHSUNDEEP
jqueryhtmlcsscss-shapes
user979974
user979974

Reputation: 953

CSS triangle arrow menu active item

I'm trying to put an arrow-up by using "pure" CSS on my active items menu. Problem, I have a weird output. here my FIDDLE. Do you know how to resolve it ?

    #cssmenu li.active a {
   /* display: inline;
    border-bottom: 3px solid #00b8fd;
    float: left;
    margin: 0;*/
    width: 0; 
    height: 0; 
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;

    border-bottom: 10px solid black;
}

Upvotes: 0

Views: 6773

Answers (3)

fidel castro
fidel castro

Reputation: 1607

The arrow at the bottom as you asked

position: relative;
top: 60px;

here the fiddle link http://jsfiddle.net/suriyag/HwcTn/1/

Upvotes: 0

drew_w
drew_w

Reputation: 10430

The issue here is that the arrow is going to be as wide as the li that it describes. The best way to do something like this is to use a css pseudo element. What you are looking at is something like:

#cssmenu li.active a:before {
    content: ' ';
    width: 0px; 
    height: 10px; 
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 10px solid black;
    display: inline-block;
}

Best of luck!

Updated Fiddle: http://jsfiddle.net/XLfcY/

Upvotes: 2

Arun Krishnan
Arun Krishnan

Reputation: 1958

div{
    width: 0; 
    height: 0; 
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid black;
}

for the pure css arrow

Upvotes: 0

Related Questions