There is a menu made by listing ul > li > a . It is necessary that when you hover over a menu item, there is an underscore. The problem is that the border-bottom raises the menu item relatively inactive. min-height juzat not really want. How to be in this situation?

 .top_nav ul { margin: 0; padding: 0; } .top_nav ul li { display: inline-block; } .top_nav ul li a { float: left; padding: 10px 15px; margin: 0 3px; color: #999; text-transform: uppercase; } .top_nav ul li a.active, .top_nav ul li a:hover { border-bottom: 1px solid; color: #0088CC; border-bottom: 1px solid #0088CC; } 
 <div class="top_nav"> <ul> <li><a href="">Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΎΡ€Π³Π°Π½ΠΈΠ·Π°Ρ†ΠΈΡŽ</a> </li> <li><a class="active" href="">Π Π°Π·ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅ Ρ€Π΅ΠΊΠ»Π°ΠΌΡ‹</a> </li> </ul> </div>

    2 answers 2

    That's more cute and the effect is the same

     * { margin: 0; padding: 0; text-decoration: none; list-style: none; } li, a { display: table-cell; } a { width: 1000px; height: 50px; vertical-align: middle; text-align: center; position: relative; } a:after { content: ""; display: block; width: 0; border-bottom: 4px solid; position: absolute; bottom: 0; left: 50%; transition: .3s; } a:hover:after { content: ""; display: block; width: 100%; border-bottom: 4px solid; position: absolute; bottom: 0; left: 0; } 
     <ul> <li><a href="">Бсылка 1</a> </li> <li><a href="">Бсылка 2</a> </li> <li><a href="">Бсылка 3</a> </li> <li><a href="">Бсылка 4</a> </li> </ul>

    http://codepen.io/Geyan/pen/qNZaad?editors=1000

      To do this, set the border-bottom initially, and change the color from transparent to the one you want.

       .top_nav ul { margin: 0; padding: 0; } .top_nav ul li { display: inline-block; } .top_nav ul li a { border-bottom: 1px solid; border-color: transparent; float: left; padding: 10px 15px; margin: 0 3px; color: #999; text-transform: uppercase; } .top_nav ul li a.active, .top_nav ul li a:hover { border-color: #0088CC; color: #0088CC; } 
       <div class="top_nav"> <ul> <li><a href="">Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΎΡ€Π³Π°Π½ΠΈΠ·Π°Ρ†ΠΈΡŽ</a> </li> <li><a class="active" href="">Π Π°Π·ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅ Ρ€Π΅ΠΊΠ»Π°ΠΌΡ‹</a> </li> </ul> </div>

      • Thank. For sure. - Alexander