Copy to clipboard

Source code:

<!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" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title></title>
	<style>
		/*-------------------------------------------------------------------------------------------------------------*/
		/*Horizontal menu, с подmenu*/
		/*Menu based on the menu items images and active menu item*/
		/*-------------------------------------------------------------------------------------------------------------*/
		body {
			font-family: Arial;
			padding: 0;
			margin: 0;
		}

img {
			border: 0;
		}
		.menu {
			height: 50px; /*menu height*/
			width: 800px; /*menu length*/
			margin: 0 auto;
		}

.menu ul.menu {
			height: 50px;
			float: left;
			list-style: none;
			margin: 0;
			padding: 0;
		}

.menu ul li {
			float: left;
			font-size: 15px;
			position:relative;
			background: #b40606; /*menu item background*/
		}

.menu ul li a {
			text-decoration: none;
			float: left;
			padding: 17px 20px;
			width: 110px; /*menu item length*/
			text-align:center;
			color: #fff; /*menu color background menu*/
		}

.menu ul li ul {
			display: none;
			list-style: none;
			margin: 0;
			padding: 0;
		}

.menu ul li a:hover {
			float: left;
			padding: 17px 20px 12px 20px;
			color: #fff;
			border-bottom: 5px #fc0000 solid; /*menu item bottom line menu when mouse on*/
		}

.menu ul li:hover ul{
			display:block; 
			position:absolute; 
			top: 47px; 
			padding-top: 4px;
			left:0; 
			width:110px; /*submenu item length*/
			background-image: none;
		}

.menu ul li:hover ul li a {
			display:block; 
			background:#b40606;  /*submenu item background */
			width: 110px; /*submenu item length*/
			padding: 15px 20px;
		}

.menu ul li:hover ul li a:hover {
			border-bottom: 5px #fc0000 solid; /*submenu bottom line when mouse on*/
			padding: 15px 20px 10px 20px;
		}

/*стили для ie6*/

.menu ul li a.hide, .menu ul li a:visited.hide {
			-display:none;
		}

.menu table {
			-border-collapse: collapse;
			-padding: 0;
			-border: 0;
		}

.menu ul li a:hover {
			-text-decoration: none;
			-float: left;
		}

.menu ul.menu li a:hover {
			-position: relative;
		}

.menu ul.menu li a:hover ul {
			-display: block; 
			-position: absolute; 
			-width: 100px;
			-padding-top: 17px;
			-clear: left;
			-left: 0;
		}

.menu ul li a:hover ul li a {
			-display:block; 
			-background:#b40606;
			-width: 110px;
			-padding: 15px 20px;
		}

.menu ul li a:hover ul li a:hover {
			border-bottom: 5px #fc0000 solid; 
			padding: 15px 20px 10px 20px;
		}

</style>
</head>
<body>
	<div class="menu">
		<ul class="menu">
			<li><a class="hide" href="#">menu item 1</a>
				
					<ul>
						<li><a href="#">submenu item 1</a></li>
						<li><a href="#">submenu item 2</a></li>
					</ul>		
												
			</li>
			<li><a href="#" class="hide">menu item 2</a>
				
					
			</li>
			<li><a class="hide" href="#">menu item 3</a>
				
					<ul>
						<li><a href="#">submenu item 1</a></li>
						<li><a href="#">submenu item 2</a></li>
					</ul>			
												
			</li>
			<li><a class="hide" href="#">menu item 4</a>
				
					<ul>
						<li><a href="#">submenu item 1</a></li>
						<li><a href="#">submenu item 2</a></li>
					</ul>			
												
			</li>
			<li><a class="hide" href="#">menu item 5</a>
				
					<ul>
						<li><a href="#">submenu item 1</a></li>
						<li><a href="#">submenu item 2</a></li>
					</ul>			
												
			</li>
		</ul>
	</div>
</body>
</html>