Twipped/Dot Menu CSS

## Dot Menu CSS
<!DOCTYPE HTML>
<html lang="ru-RU">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css" media="screen">
		.dotlist {
			text-align:center;
			font-size:1px;	/*This removes any whitespace between the elements*/
		}
		.dotlist li {
			display: inline-block;zoom:1;*display:inline;	/*IE7 Inline Block Hack*/
			width:150px;height:45px;			/*Must have an explicit height to work in IE7*/
			position:relative;
		}

		.dotlist a {
			text-decoration:none;
			font-size:12px;
			color:#989998;
		}

		.dotlist li span { 	/*Line*/
			display:block;
			width:100%;
			height:2px;
			background:#989998;
			position:absolute;right:0;top:10px;
		}


		.dotlist li:first-child {width:20px;} 			/*Remove the line and adjust the width of the first item	*/
		.dotlist li:first-child span {display:none;}


		.dotlist li b {  	/*Circle*/
			display:block;
			width:1px;height:1px;
			background:#989998;
			border:10px solid #989998;
			-webkit-border-radius:10px;
			-moz-border-radius:10px;
			border-radius:10px;
			position:absolute;right:0;top:0;
		}


		.dotlist li strong { 	/*Text*/
			display:block;
			width:100px;
			position:absolute;right:-40px;top:25px;
		}

		.dotlist .visited a 	{color:black;}
		.dotlist .visited span	{background:black;}
		.dotlist .visited b 	{background:black;border-color:black;}

		.dotlist a:hover 		{color:blue;}
		.dotlist a:hover b		{background:blue;border-color:blue;}

	</style>
</head>
<body>

	<ul class="dotlist">
		<li class="visited">
			<a href="#Home">
				<span></span>
				<b></b>
				<strong>Home</strong>
			</a>
		</li>
		<li class="visited">
			<a href="#About">
				<span></span>
				<b></b>
				<strong>About</strong>
			</a>
		</li>
		<li>
			<a href="#Stuff">
				<span></span>
				<b></b>
				<strong>Stuff</strong>
			</a>
		</li>
		<li>
			<a href="#Contact">
				<span></span>
				<b></b>
				<strong>Contact</strong>
			</a>
		</li>
	</ul>

</body>
</html>