There is a menu made on CSS, without JS. When you hover, everything works, but the point that I chose (the main one), it becomes equal in width to the blocks that are inside it:

inactive item:

alt text

when brought:

alt text

How can I make the width not change, regardless of the width of the internal points?

.header_menu>li { vertical-align: middle; display: inline-block; font-size: 17px; height: 40px; } .header_menu li>a { -webkit-transition: color .2s, background .2s, border .2s; -moz-transition: color .2s, background .2s, border .2s; -o-transition: color .2s, background .2s, border .2s; transition: color .2s, background .2s, border .2s; } .header_menu li:hover #sub_header_menu { display: block; } .header_menu li:hover {} .header_menu li>a:hover { background-color: #FD4A29; color: #F0F0F8; -webkit-transition: color .2s, background .2s, border .2s; -moz-transition: color .2s, background .2s, border .2s; -o-transition: color .2s, background .2s, border .2s; transition: color .2s, background .2s, border .2s; } .header_menu a { display: block; border-right: 1px solid #F4F4FC; color: #777777; text-decoration: none; padding: 10px 15px; } #sub_header_menu { display: none; } #sub_header_menu a { border: 0; } #sub_header_menu li { list-style-type: none; } #sub_header_menu { border: 1px solid #F4F4FC; background: white; } 
 <ul class="header_menu"> <li><a href="#">4242342342</a></li> <li><a href="#">Главная</a></li> <li><a href="#">О нас</a></li> <li> <a href="#">Кафедра</a> <ul id="sub_header_menu"> <li><a href="#">Лолшокваа</a></li> <li><a href="#">ываавыаыв</a></li> <li><a href="#">ваываывааа</a></li> <li><a href="#">ваыавыавыа</a></li> <li><a href="#">аываыаывва</a></li> </ul> </li> <li><a href="#">Абитуриенту</a></li> <li><a href="#">Много</a></li> <li><a href="#">Даже 3</a></li> </ul>

  • I'm afraid this is impossible. Attach the CSS code, because it is not clear how it works. - Enterely
  • Everything, put. - Man

2 answers 2

http://jsfiddle.net/ynn7mavs/

    Just add absolute positioning for a submenu.

     .header_menu>li { vertical-align: middle; display: inline-block; font-size: 17px; height: 40px; } .header_menu li>a { -webkit-transition: color .2s, background .2s, border .2s; -moz-transition: color .2s, background .2s, border .2s; -o-transition: color .2s, background .2s, border .2s; transition: color .2s, background .2s, border .2s; } .header_menu li:hover #sub_header_menu { display: block; } .header_menu li:hover {} .header_menu li>a:hover { background-color: #FD4A29; color: #F0F0F8; -webkit-transition: color .2s, background .2s, border .2s; -moz-transition: color .2s, background .2s, border .2s; -o-transition: color .2s, background .2s, border .2s; transition: color .2s, background .2s, border .2s; } .header_menu a { display: block; border-right: 1px solid #F4F4FC; color: #777777; text-decoration: none; padding: 10px 15px; } #sub_header_menu { display: none; position:absolute; } #sub_header_menu a { border: 0; } #sub_header_menu li { list-style-type: none; } #sub_header_menu { border: 1px solid #F4F4FC; background: white; } 
     <ul class="header_menu"> <li><a href="#">4242342342</a></li> <li><a href="#">Главная</a></li> <li><a href="#">О нас</a></li> <li> <a href="#">Кафедра</a> <ul id="sub_header_menu"> <li><a href="#">Лолшокваа</a></li> <li><a href="#">ываавыаыв</a></li> <li><a href="#">ваываывааа</a></li> <li><a href="#">ваыавыавыа</a></li> <li><a href="#">аываыаывва</a></li> </ul> </li> <li><a href="#">Абитуриенту</a></li> <li><a href="#">Много</a></li> <li><a href="#">Даже 3</a></li> </ul>