Make Zoom Menu CSS

In this post. I will be show you how to make a zoom menu by css.

Step 1: We will make a structure html as below.

<div id="container">
<ul>
    <li class="menu1"><a href="">menu 1</a></li>
    <li class="menu2"><a href="">menu 2</a></li>
    <li class="menu3"><a href="">menu 3</a></li>
    <li class="menu4"><a href="">menu 4</a></li>
</ul>
</div>

Step 2: Use css to style menu

ul {
	position: relative;
	width: 400px;
	height: 28px;
	list-style: none;
	overflow: hidden;
	padding: 0px 0px 0px 5px;
	/*border-top: 1px solid #c2c2c2;
	border-bottom: 1px solid #c2c2c2;*/
}
li.menu1 a, li.menu2 a, li.menu3 a, li.menu4 a {
	position: absolute;
	width: 100px;
	height: 25px;
	top: 0px;
	text-decoration: none;
	text-align: center;
	border-right: 1px solid #c2c2c2;
}
li.menu1 a {
	left: 5px;
}
li.menu2 a {
	left: 100px;
}
li.menu3 a {
	left: 200px;
}
li.menu4 a {
	left: 300px;
	border: none;
}
li.menu1 a:hover, li.menu2 a:hover, li.menu3 a:hover, 
li.menu4 a:hover {
	background: url(bg-hover.png) no-repeat 0 0;
	color: #fff;
	position: absolute;
	width: 110px;
	height: 28px;
	top: 0px;
	text-decoration: none;
	text-align: center;
	border: none;
}
li.menu1 a:hover {
	left: 0px;
}
li.menu2 a:hover {
	left: 95px;
}
li.menu3 a:hover {
	left: 195px;
}
li.menu4 a:hover {
	left: 295px;
}

Final Result: