How to use a divider in a navigation with list elements?
- by Kris
I want to create a navigation which got divider between each list element.
Here is a simple HTML/CSS Code/Template :
<nav>
<ul>
<li><a href="#">A</a></li>
<li><a href="#">B</a></li>
<li><a href="#">C</a></li>
<li><a href="#">D</a></li>
<li><a href="#">E</a></li>
</ul>
</nav>
nav ul {
list-style:none;
float:right;
}
nav ul li {
float:left;
padding-left:10px;
}
nav ul li a {
color:#111;
font-family:Verdana;
font-size:15px;
text-decoration:none;
}
nav ul li a:hover {
color:#9F3039;
}
so just a simple looking navigation which floats from the right side on a logo which is not displayed in the code here. Now I want to at devider between each link - I know I could do it with border-right and just use another class on my last listelement which set the border-right off, BUT I want to use a special kind of divider - an image.
How can I do it best ?
