Menu items where only the first and last item has rounded corners |
|
jaq316
|
I hope someone can help me.
I am trying to get the menu to like like the one on https://www.instantlife.co.za
I've tried overriding CSS using the following:
ul.art-hmenu>li>a:before, ul.art-hmenu>li>a:after
{
background-image: none;
}
ul.art-hmenu>li:first-child>a:before
{
background-image: url('images/menuitem.png');
}
ul.art-hmenu>li:last-child>a:after
{
background-image: url('images/menuitem.png');
}
This does remove the rounded corners as needed, but it also removes the background of all the LI items that aren't the first child.
Your help will be much appreciated
|
| |
jaq316
|
I've managed to solve the problem myself. Here's the CSS if anyone is interested:
/* override passive menu item */
ul.art-hmenu>li>a:before {
background-position: top center;
}
ul.art-hmenu>li>a:after {
background-position: top center;
}
ul.art-hmenu>li:first-child>a:before {
background-position: top left;
}
ul.art-hmenu>li:last-child>a:after {
background-position: top right;
}
/* override hover menu item */
ul.art-hmenu>li>a:hover:before, ul.art-hmenu>li:hover>a:before {
background-position: center center;
}
ul.art-hmenu>li>a:hover:after, ul.art-hmenu>li:hover>a:after {
background-position: center center;
}
ul.art-hmenu>li:first-child>a:hover:before, ul.art-hmenu>li:hover:first-child>a:before {
background-position: center left;
}
ul.art-hmenu>li:last-child>a:hover:after, ul.art-hmenu>li:hover:last-child>a:after {
background-position: center right;
}
/* override active menu item */
ul.art-hmenu>li>a.active:before {
background-position: bottom center;
}
ul.art-hmenu>li>a.active:after {
background-position: bottom center;
}
ul.art-hmenu>li:first-child>a.active:before {
background-position: bottom left;
}
ul.art-hmenu>li:last-child>a.active:after {
background-position: bottom right;
}
|
| |
|
|