List based menu

List based menu : List menu : CSS Controls HTML CSS TUTORIALS

HTML CSS TUTORIALS » CSS Controls » List menu »


 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title></title>
<style type="text/css" media="Screen">
#navigation ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  width: 140px;
  font-size: 100%;
}
#navigation a {
  text-decoration: none;
  display: block;
  padding: 3px 12px 3px 8px;
  background-color: #666;
  color: #fff;
  border-top: 1px solid #ddd;
  border-right: 1px solid #333;
  border-bottom: 1px solid #333;
  border-left: 1px solid #ddd;
}
#navigation a:active {
  padding: 2px 13px 4px 7px;
  background-color: #444;
  color: #eee;
  border-top: 1px solid #333;
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  border-left: 1px solid #333;
}

#navigation li li a {
  text-decoration: none;
  padding: 3px 3px 3px 17px;
  background-color: #999;
  color: #111111;
}
#navigation li li a:active {
  padding: 2px 4px 4px 16px;
  background-color: #888;
  color: #000;
  border-top: 1px solid #333;
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  border-left: 1px solid #333;
}
</style>
</head>
<body>
    <div id="navigation">
        <ul>
            <li>
                <a href="#">Section one</a>
                <ul><li><a href="#">A link to a page</a></li>
                    <li><a href="#">A link to a page</a></li>
                    <li><a href="#">A link to a page</a></li>
                    <li><a href="#">A link to a page</a></li>
                </ul>
            </li>
            <li>
                <a href="#">Section two</a>
                <ul><li><a href="#">A link to a page</a></li>
                    <li><a href="#">A link to a page</a></li>
                    <li><a href="#">A link to a page</a></li>
                    <li><a href="#">A link to a page</a></li>
                </ul>
            </li>
        </ul>
    </div>
</body>
</html>