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; }