Question

I have a menu item that which I’ve created using display:table-cell; to ensure that the menu tabs “lengthen” when the user expands the screen. However I need to complete the right side of the tabs to finish the rounded corner at the top. I have a separate tabRight.png which consists of a slice of the right side of the tab. I need to place this right before each “tab opening”. I have exhausted everything I know and the closing doors method I found online isn’t working for this case. The right side should have a transparent corner so I don’t think I can put it over the existing grey background.

The code is:

CSS:

#nav ul{
    display:table;
    width:100%;
    border-spacing: 10px;
    margin:0;
    padding:0;
}
#nav li{
    width:20%;
    display:table-cell;
    background: url('tab.png') no-repeat;
    color:#000;
    text-align:center;
    height:31px;
}
#nav a{
    display:block;
    text-decoration:none;
    color:black;
}

p{
    padding:0px;
    margin:0px;
}

HTML:

<div id="nav">
<ul>
    <li>
        <a href="http://www.google.com">
        <div>
            <img src="address.png"/>
            <p>Deadlines</p>
        </div>
        </a>    
    </li>
    <li>About</li>
    <li>Address</li>
    <li>Phone</li>
</ul>
</div>

EDIT:

I have tried the after method and I get the transparent portion overlapping the left background, so as the background shows through the transparency which what I was afraid of.

EDIT 2:

I set the position of the tabRight.png to -10px (10px is the width) and that pushed the edge to the right so the transparency problem no longer occurs.

Thanks guys for your help!

Answer 1

If you can use CSS :after pseudo selector class, then adding position:relative; to your li and the new rule:

#nav li:after {
    width:5px;
    content:"";
    position:absolute;
    height:100%;
    top:0;
    right:0;
}

will add an element on the right of all the list items.

Demo here (with some borders added for clarity)