My goal is to create a menu with a design like this:
| one | two | three | four|
Through CSS and borders, it's possible to achieve a similar look by:
.myContainer > ul > li{
border-right: 1px solid purple;
}
.myContainer > ul > li:first-child{
border-left: 1px solid purple;
}
I was given vertical images that I intended to use as borders. Sounds simple, right? Not quite. Here is how I attempted to implement it:
.nav-main > ul > li{
background: url('/Images/vertLine.png')no-repeat right top;
}
.nav-main > ul > li:first-child{
background: url('/Images/vertLine.png')no-repeat left top;
}
However, the result I got was:
| one two | three | four|
Any suggestions on how I can successfully use images in achieving the desired menu design?