CSS - Move menu to top on hover -


i have menu needed move item top on hover, doesn't work. here do.

.menu li{     display: inline-block;       }      .menu li a{     display: block;      line-height: 20px;     padding: 0 20px;     border-bottom: 5px solid #000000;     }  .menu li a:hover{     margin-top: -5px;     border-bottom-width: 10px; } 

<li class="active">                                  <a href="#">home</a> </li> <li>                                     <a href="#">about</a> </li>                <li>                                     <a href="#">contact</a> </li>                    

http://jsfiddle.net/26mlv/

one possible solution:

.menu li{     display: inline;       }      .menu li a{     display:block;      float:left;     line-height: 20px;     padding: 0 20px;     border-bottom: 5px solid #000000;        margin:0;     background-color:#cecece;  }  .menu li a:hover{     margin-top: -5px;     border-bottom-width: 10px; } 

Comments

Popular posts from this blog

android - Get AccessToken using signpost OAuth without opening a browser (Two legged Oauth) -

org.mockito.exceptions.misusing.InvalidUseOfMatchersException: mockito -

google shop client API returns 400 bad request error while adding an item -