I'm working on a vertical navigation bar and I'd like to make some styling changes. Here's the current setup (View jFiddle):
<style>
ul{
list-style-type: none;
}
li{
display: block;
margin: 0;
padding: 10;
border-top: 1px dashed #08C;
}
li:hover{
background-color: #08C;
}
</style>
<ul>
<li>Abc</li>
<li>Test 2</li>
<li>Test 3</li>
<li>Test 4</li>
</ul>
Currently, when I hover over a list item, the background color changes to blue but the surrounding dashed border remains. I want the hovered list item to have a solid border instead of dashed, and I also want the next list item to have a solid border when its previous sibling is hovered. However, I don't want to use JavaScript for this. Is there a simple way to achieve this effect?
Here is an example of what I want to achieve on hover:
And here is what I currently get:
I initially thought about setting both border-top and border-bot of each list item to dashed, then changing them to solid on hover. But this would result in two dashed lines surrounding the hovered item.
If anyone has a good solution for this styling issue, I would appreciate the help!