C i a n o p i

Want to learn more ways to use css lists? Here I’m going to show a few examples of typical navigation lists using just the <ul> with <a> tags between them.

The HTML codes used in the first two examples are the same:

<ul>
<li><a href=”#”>About</a></li>
<li><a href=”#”>Visitor</a></li>
<li><a href=”#”>Domain</a></li>
<li><a href=”#”>Home</a></li>
</ul>

x.Horizontal Navigation

• About
• Visitor
• Domain
• Home

ul li {
      list-style-type:none;
      display: inline;
      background:#888;
      padding:4px;
      margin-left:-3px;
}
ul li:hover {
      background:#aaa;
}
ul li a {
      color:#444;
      background:transparent;
      text-decoration:none;
}
ul li a:hover {
      color:#444;
      background:transparent;
      text-decoration:none;
}

x.Sidebar Navigation

• About
• Visitor
• Domain
• Home

ul {
      width:120px;
}
ul li {
      list-style-type:none;
      background:#ccc;
      padding-left:4px;
      border-left:6px solid #888;
}
ul li:hover {
      color:#444;
      background:#aaa;
      padding-left:4px;
}
ul li a {
      color:#444;
      background:transparent;
      text-decoration:none;
}
ul li a:hover {
      color:#444;
      background:transparent;
      text-decoration:none;
}