LI based top menu : list style « CSS « HTML / CSS






LI based top 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" dir="ltr" lang="en-US"
  xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title></title>
<style rel="stylesheet" type="text/css">

#navigation {
  text-align: center;
  width: 940px;
  line-height: 17px;
  padding: 0 0 7px 0;
}

#navigation li {
  display: inline;
  font-family: Tahoma, sans-serif;
  font-size: 12px;
  color: red;
}

#navigation a {
  color: black;
  text-decoration: none;
  margin: 0 12px 0 12px;
}

#navigation a:visited {
  text-decoration: none
}

#navigation a:hover {
  text-decoration: underline
}



</style>
</head>
<body>
        <ul id="navigation">
          <li><a href="#">Home</a>|</li>
          <li><a href="#">About us</a>|</li>
          <li><a href="#">Sale</a>|</li>
          <li><a href="#">Rentings</a>|</li>
          <li><a href="#">News</a>|</li>
          <li><a href="#">Our Partners</a>|</li>
          <li><a href="#">F.A.Q.</a>|</li>
          <li><a href="#">Contacts</a></li>
        </ul>
        
</body>

</html>

   
    
    
  








Related examples in the same category

1.'list-style' Example
2.list-style: inside url('exploded_folder.gif')
3.list-style: disc outside url('download.gif')
4.list-style: square url('arrow.png') outside
5.list-style: square url('arrow.png') outside;
6.list-style: url('arrow.png') inside;
7.list-style: square inside;
8.list-style: square url('arrow.png');
9.list style: disc outside url('download.gif');
10.list style with image
11.list-style all values
12.The image and the position can be specified
13.You can specify only a marker
14.You can specify only the position.
15.You can specify only a marker image
16.The marker and the position can be specified
17.The marker and the image can be specified
18.list-style: url('arrow.png') inside
19.list-style: square inside
20.list-style: square url('arrow.png')
21.list-style: url('arrow.png')
22.list-style: circle
23.list-style: inside
24.LI display: inline;
25.LI padding: 0 19px;
26.LI line-height: 25px;
27.LI Menu