html - How can I make individual items on the nav bar stretch? -
in navagation bar, want hovered on elements stretch out , change color, seems whole navagation bar stretches. i've tried changing must hovered on trigger animation, nothing seems working. can identify , correct error?
@keyframes mouse { 0% { background-color: #35b1c2; height: 40px } 100% { background-color: #2f9ebd; height: 60px } } ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #35b1c2; } li { float: left; } li { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } li:hover { animation-fill-mode: forwards; animation-duration: 0.5s; animation-name: mouse; } li { border-right: 1px solid #bbb; } li:last-child { border-right: none; }
<ul> <li><a href="index.html">home</a></li> <li><a href="aboutme.html">about me</a></li> <li><a href="projects.html">projects</a></li> </ul>
you can remove overflow:hidden
, add
overflow:visible; height:45px; /* height of navbar */
to ul
element.
Comments
Post a Comment