Приветствую! Прошу оценить горизонтальное меню на html css. Я только еще учусь и мне нужна критика знающих людей, указать на ошибки, где-что можно упростить и тд.
html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link href="StyleSheet.css" rel="stylesheet" />
<title></title>
</head>
<body>
<nav>
<ul>
<li class="width">
<a class="noborder" target="_self" href="#"><div class="pic1"></div></a>
</li>
<li>
<a target="_self" href="#">Пример-1</a>
</li>
<li>
<a target="_self" href="#">Пример-2</a>
</li>
<li>
<a target="_self" href="#">Пример-3</a>
</li>
<li>
<a target="_self" href="#">Пример-4</a>
</li>
<li>
<a target="_self" href="#">Пример-5</a>
</li>
<li class="noborder">
<a target="_self" href="#">Пример-6</a>
</li>
</ul>
</nav>
</body>
</html>
css
body {
background-color: #fff;
font-family: Arial, Verdana, sans-serif;
}
nav {
width: 980px;
height: 40px;
border-radius: 5px;
background-image: linear-gradient(to bottom,#727272,#4c4c4c 50%,#3b3b3b 50%,#343434);
font-size: 16px;
}
nav ul {
margin: 0;
padding: 0;
list-style-type: none;
}
nav li {
width: 150px;
float: left;
border-right: 1px solid #000;
}
nav a {
text-align: center;
padding: 0 10px;
line-height: 40px;
display: block;
color: #fff;
text-decoration: none;
border-left: 1px solid #808080;
}
.noborder {
border: none;
}
li a:hover {
background-image: linear-gradient(to bottom,#232728,#0e1010);
}
li a:active {
background: radial-gradient(ellipse at center,#454545 30%,#0f0f0f 110%);
}
.width {
width: 70px;
}
.pic1:hover {
background-image: url('home_hover.png');
}
.pic1:active {
background-image: url('home_active.png');
}
div.pic1 {
background-image:url('home.png');
height: 40px;
width: 70px;
}
a.noborder {
padding: 0px;
}
ссылка с примером 
Средний
Простой
Средний