C i a n o p i

So you want a css/navigation list with images? You’ve come to the right place. This tutorial is a fairly simple one so I’ll get right to it.

To get from this:

• About
• Visitor
• Domain

to this:

• About
• Visitor
• Domain

The coding is as follows:

ul li {
      list-style-image:url(YOUR IMAGE/BULLET URL);
}

x.Hovering
If you want to have the bullets change when you hover over a word in the list:

• About
• Visitor
• Domain

ul li {
      list-style-image: url(YOUR IMAGE/BULLET URL);
}
ul li:hover {
      list-style-image: url(YOUR IMAGE/BULLET URL);
}

x.Naming Your List
If you want to specify just one list in your layout, “Navigation” for example:

ul#nav li {
      list-style-image:url(YOUR IMAGE/BULLET URL);
}
ul#nav li:hover {
      list-style-image:url(YOUR IMAGE/BULLET URL);
}

And then your html would look like this:

<ul id=”nav”>
      <li>About</li>
      <li>Visitor</li>
      <li>Domain</li>
</ul>