For example, if you change the name "People" to "People", the menu ceases to be the full width of the block.
<div class="wrapper"> <div class="content-menu"> <ul class="menu"> <li><a href="#">Новини</a></li> <li><a href="#">Человеки</a></li> <li><div><a href="#">Треки</a> <ul class="menu"> <li ><a href="#">Альбоми</a></li> <li class="leaf"><a href="#">Free Download</a></li> <li class="leaf"><a href="#">Радио шоу</a></li> </ul> </div> </li> <li><a href="#">Лейбли</a></li> <li><a href="#">Популярне</a></li> </ul> </div> CSS
.wrapper { width: 660px; margin: 0 auto; } .menu { margin-top: 50px; } .menu { display: table; } ul.menu { border: none; list-style: none; text-align: left; } ul { font-size: 14px; line-height: 20px; margin: 0 0 10px; } .content-menu > ul > li{ display: table-cell; float: none; border-right: 1px solid #fff; display: inline; float: left; margin: 0; padding: 0; margin: 0 -1px 0 0; border: 1px solid #D9D9D9; padding: 1px; position: relative; } .content-menu a { color: #000; display: block; font-size: 20px; padding: 13px 31px; text-decoration: none; white-space: nowrap; letter-spacing: -0.5px; } .content-menu ul { line-height: 20px; } .content-menu li ul { background: none repeat scroll 0 0 #FFFFFF; display: none; left: 0; padding: 0; position: absolute; text-align: left; top: 100%; z-index: 1000; margin-left: -2px; margin-top: 1px; } .content-menu li ul:hover { display: block; } .content-menu ul li.first { border-top: 0 none; } .content-menu ul li a { background: none repeat scroll 0 0 #FFFFFF; border-top: 0 none; font-size: 18px; margin: 0; white-space: nowrap; } .content-menu ul li a:hover { text-decoration: underline; } .content-menu li:hover ul { display: block; } .content-menu li > ul:hover { display: block; } li.leaf { padding: 0.2em 0.5em 0 0; margin: 0; } .menu ul li { display: block; float: none; margin: 0; padding: 0; margin: 0 0 -1px 0; border: 1px solid #D9D9D9; } .content-menu > ul > li:hover { border: 2px solid #1A1A1A; padding: 0px; z-index: 1002; } 
