How to make the selection go for the entire width of the block, and not just for the width in which the words fit.

enter image description here

enter image description here

CSS code sub menu, that is, pop-up on hover.

.topmenu > li > a.active, .submenu a:hover { color: #fff; } .topmenu .fa, .submenu .fa { margin-left: 5px; color: inherit; } .submenu { position: absolute; z-index: 5; min-width: 200px; background: white; border-top: 1px solid #CBCBCC; border-left: 1px solid #CBCBCC; border-right: 1px solid #CBCBCC; visibility: hidden; opacity: 0; transform-origin: 0% 0%; transform: rotateX(-90deg); transition: .3s linear; } .submenu li {position: relative;} .submenu li a { color: #282828; padding: 10px 20px; font-size: 13px; border-bottom: 1px solid #CBCBCC; } .submenu .submenu { position: absolute; left: 100%; top: -1px; transition: .3s linear; } nav li:hover > .submenu { transform: rotateX(0deg); visibility: visible; opacity: 1; } 
  <div class="menu"> <div class="left-logo"> </div> <div class="main-menu"> <nav> <ul class="topmenu"> <li><a href="">Главная</span></a></li> <li><a href="">Услуги</a> <ul class="submenu"> <li><a href="">Лечебно-оздоровительный массаж</a></li> <li><a href="">Стрижка</a></li> </ul> </li> <li><a href="">О нас</a></li> <li><a href="">Контакты</a></li> </ul> </nav> </div> </div>

There is also a main menu code, if necessary, I will attach it.

  • Make the necessary elements for the entire width of the genus. block. - E_K
  • Thank. Added width: 100%; in .submenu li a {width: 100%;} - hitFM

1 answer 1

It is necessary to set the display: block property.

 .topmenu > li > a.active, .submenu a:hover { color: #fff; } .topmenu .fa, .submenu .fa { margin-left: 5px; color: inherit; } .submenu { position: absolute; z-index: 5; min-width: 200px; background: white; border-top: 1px solid #CBCBCC; border-left: 1px solid #CBCBCC; border-right: 1px solid #CBCBCC; visibility: hidden; opacity: 0; transform-origin: 0% 0%; transform: rotateX(-90deg); transition: .3s linear; } .submenu li {position: relative;} .submenu li a { color: #282828; padding: 10px 20px; display: block; font-size: 13px; border-bottom: 1px solid #CBCBCC; } .submenu .submenu { position: absolute; left: 100%; top: -1px; transition: .3s linear; } nav li:hover > .submenu { transform: rotateX(0deg); visibility: visible; opacity: 1; } 
 <div class="menu"> <div class="left-logo"> </div> <div class="main-menu"> <nav> <ul class="topmenu"> <li><a href="">Главная</span></a></li> <li><a href="">Услуги</a> <ul class="submenu"> <li><a href="">Лечебно-оздоровительный массаж</a></li> <li><a href="">Стрижка</a></li> </ul> </li> <li><a href="">О нас</a></li> <li><a href="">Контакты</a></li> </ul> </nav> </div> </div>