Three level list : LI : List Style HTML CSS TUTORIALS

HTML CSS TUTORIALS » List Style » LI »

Three level list


 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Creating better-looking lists</title>
<style type="text/css" media="screen">
ul {
    list-style-type: none;
    background: red;
}

ul ul {
    background: yellow;
    border-left: 1px dotted #aaaaaa;
    padding: 10px;
    }
    
ul ul ul {
    background: none;
    border-left: 0;
    }
    
li {
    text-transform: uppercase;
    padding-left: 20px;
    font-weight: bold;
    color: #666666;
}
    
li li {
    text-transform: none;
    background: url(list-square.gif) 0 2px no-repeat;
    font-weight: normal;
    color: #333333;
}

li li li {
    background: url(square.gif) 0 2px no-repeat;
}
</style>
</head>
<body>
    <ul>
      <li>List - 1.1
        <ul>
          <li>List - 2.1</li>
          <li>List - 2.2
            <ul>
              <li>List - 3.1</li>
              <li>List - 3.2</li>
              <li>List - 3.3</li>
            </ul>
          </li>
          <li>List - 2.3</li>
        </ul>
      </li>
    </ul>
</body>
</html>