We would like to know how to change width on hover for li menu items.
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
ul {<!--from w ww . ja va 2 s .c o m-->
list-style-type: none;
padding: 5px;
margin: 0;
}
ul li {
margin: 0px 5px;
margin-left: -13px;
list-style: none;
}
ul li a {
background: #EEE;
height: 25px;
left: 10px;
position: relative;
top: 0px;
transition: width 400ms, height 200ms, border-radius 200ms, left 200ms,
top 200ms, background-color 400ms;
-moz-transition: width 400ms, height 200ms, border-radius 200ms, left
200ms, top 200ms, background-color 400ms;
-ms-transition: width 400ms, height 200ms, border-radius 200ms, left
200ms, top 200ms, background-color 400ms;
-o-transition: width 400ms, height 200ms, border-radius 200ms, left
200ms, top 200ms, background-color 400ms;
-webkit-transition: width 400ms, height 200ms, border-radius 200ms, left
200ms, top 200ms, background-color 400ms;
width: 25px;
overflow: visible;
}
ul li a:hover {
width: 250px;
height: 25px;
left: 0px;
top: 0px;
background-color: #000;
z-index: 1000;
}
</style>
</head>
<body>
<ul>
<li><a href=""> Demo 1 </a></li>
<li><a href=""> Demo 2 </a></li>
<li><a href=""> Demo 3 </a></li>
<li><a href=""> Demo 4 </a></li>
<li><a href=""> Demo 5 </a></li>
<li><a href=""> Demo 6 </a></li>
</ul>
</body>
</html>
The code above is rendered as follows: