CODEWITHSUNDEEP
css
Huw Rowlands
Huw Rowlands

Reputation: 591

CSS Arrows using :after Disappearing Issue

I have a css arrow on a vertical sub-nav here: http://rumble.com.au/technology/ but for some reason I can't get it to appear correctly. It should be on the outside of the right hand side, but as you can see, half of it has been cut off. If I move the arrow further right it disappears. How can I get it to appear on the right hand side?

I'd like it to work as on this page please: http://cssarrowplease.com/

Thanks

Upvotes: 1

Views: 221

Answers (2)

Ankur Bhadania
Ankur Bhadania

Reputation: 4148

in your css .z-tabs li:hover:after, .z-tabs li:focus:after, .z-tabs li.z-active:after class LINE number 389 change the left:95% to left: 93%

Upvotes: 3

Edorka
Edorka

Reputation: 1811

I would do the LI item without colored background, only the arrow, inside LI the A element would have a margin right enought to fit the arrow.

the color background would be in the A element.

in this example you should put the background between the gray background and the dotted border:

ul {
    list-style: none;
}

ul li {
    width: 120px;
    border: dotted 1px gray;
    line-height: 25px;
    margin-bottom: 5px;
}
ul li a{
    width: 100px;
    margin-right: 5px;
    background-color: #ccc;
    line-height: 25px;
    display: block;
}

I used part of your HTML

<ul class="z-tabs-nav z-tabs-desktop">
    <li class="z-tab z-first z-active" data-link="tab1" style=""><a class="z-link">Cloud</a>
    </li>
    <li class="z-tab" data-link="tab2" style=""><a class="z-link">Onelogin</a>
    </li>
    <li class="z-tab" data-link="tab3" style=""><a class="z-link">Nimble CRM</a>
    </li>
    <li class="z-tab z-last" data-link="tab4" style=""><a class="z-link">Service Now</a>
    </li>
</ul>

http://jsfiddle.net/7pex9/

Upvotes: 0

Related Questions