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

Popular posts from this blog

Command prompt result in label. Python 2.7 -

javascript - How do I use URL parameters to change link href on page? -

amazon web services - AWS Route53 Trying To Get Site To Resolve To www -