List with anchor : Anchor : Basic Tags HTML CSS TUTORIALS


HTML CSS TUTORIALS » Basic Tags » Anchor »

 

List with anchor


 


<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
ul{  
  list-style:none;
  margin:0;
  padding:0;
  float:left;
}
ul#test{
  font-size:120%;
  width:28em;
  background:#aaa
}
ul#test li{
  clear:both;
  text-align:right;
  width:10em;
}
ul#test li a{
  display:block;
  float:right;
  border:1px solid #000;
  background:#ccc;
  padding:3px;
  text-decoration:none;  
  color:#000;
  margin:5px;
}
ul#test ul{
  position:relative;
  left:10.5em;
  margin-top:-2em;
  width:17em;
}
ul#test li li{
  clear:none;
  text-align:left;
  display:inline;
}
ul#test li li a{
  float:left;
  text-align:left;
  white-space:nowrap;
  background:#fff;
}

</style>
</head>
<body>
<ul id="test">
  <li><a href="">Item 1</a></li>
  <li><a href="">Item 2</a>
    <ul>
      <li><a href="">Inner 1</a></li>
      <li><a href="">Inner 2</a></li>
      <li><a href="">Inner 3</a></li>
      <li><a href="">Inner 4</a></li>
      <li><a href="">Inner 5</a></li>
      <li><a href="">Inner 6</a></li>
      <li><a href="">Inner 7</a></li>
      <li><a href="">Inner 8</a></li>
    </ul>
  </li>
  <li> <a href="">Item 3</a> </li>
  <li> <a href="">Item 4</a>
    <ul>
      <li><a href="">Inner 1</a></li>
      <li><a href="">Inner 2</a></li>
      <li><a href="">Inner 3</a></li>
    </ul>
  </li>
</ul>
</body>
</html>

 



HTML code for linking to this page:

Follow Navioo On Twitter

HTML CSS TUTORIALS

 Navioo Basic Tags
» Anchor