<!-- Центрированое горизонтальное меню --> <div class="row"> <span class="header">Центрированное горизонтальное меню</span> <nav class="horizontal-nav center-nav"> <ul> <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> <li><a href="#">Ссылка</a></li> </ul> </nav> </div> <!-- Центрированое горизонтальное меню --> <!-- Нецентрированное горизонтальное меню (слева) --> <div class="row"> <span class="header">Нецентрированное горизонтальное меню (слева)</span> <nav class="horizontal-nav left"> <ul> <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> <li><a href="#">Ссылка</a></li> </ul> </nav> </div> <!-- Нецентрированное горизонтальное меню (слева) --> <!-- Нецентрированное горизонтальное меню (справа) --> <div class="row"> <span class="header">Нецентрированное горизонтальное меню (справа)</span> <nav class="horizontal-nav right"> <ul> <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> <li><a href="#">Ссылка</a></li> </ul> </nav> </div> <!-- Нецентрированное горизонтальное меню (справа) --> <!-- Центрированное вертикальное меню --> <div class="row"> <span class="header">Вертикальное меню (слева)</span> <nav class="vertical-nav center-nav"> <ul> <li><a href="#">Ссылка</a></li> <li><a href="#">Ссылка</a></li> <li><a href="#">Ссылка</a></li> </ul> </nav> </div> <!-- Центрированное вертикальное меню --> <!-- Вертикальное меню (слева) --> <div class="row"> <span class="header">Вертикальное меню (слева)</span> <nav class="vertical-nav left"> <ul> <li><a href="#">Ссылка</a></li> <li><a href="#">Ссылка</a></li> <li><a href="#">Ссылка</a></li> </ul> </nav> </div> <!-- Вертикальное меню (слева) --> <!-- Вертикальное меню (справа) --> <div class="row"> <span class="header">Вертикальное меню (справа)</span> <nav class="vertical-nav right"> <ul> <li><a href="#">Ссылка</a></li> <li><a href="#">Ссылка</a></li> <li><a href="#">Ссылка</a></li> </ul> </nav> </div> <!-- Вертикальное меню (справа) -->
/* Основные стили */ * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0; } body { font-size: 12pt; font-family: Verdana, Tahoma, sans-serif; color: #000; } /* Другие стили */ .row { margin: 20px 0; width: 100%; float: left; padding: 20px; background-color: #FFFFFF; border: 1px solid #D2D2D2; } .row .header { font-size: 9pt; text-transform: uppercase; font-weight: bold; color: #4E4E4E; text-align: center; width: 100%; display: block; margin-bottom: 10px; } /* Общие стили */ nav.vertical-nav ul > li > a, nav.horizontal-nav ul > li > a { background-color: #E4E4E4; color: #5D5D5D; text-decoration: none; font-size: 11pt; float: left; } nav.horizontal-nav ul > li > a, nav.vertical-nav ul > li { display: block; } nav.left { float: left; } nav.right { float: right; } nav.center-nav ul {display: table; margin: 0 auto;} /* Горизонтальное меню */ nav.horizontal-nav, nav.vertical-nav { position: relative; } nav.horizontal-nav ul, nav.vertical-nav ul { list-style: none; } nav.horizontal-nav ul > li { display: inline-block; float: left; } nav.horizontal-nav ul > li > a { padding: 10px 20px; } nav.horizontal-nav ul > li > a:hover, nav.horizontal-nav ul > li > a:active, nav.horizontal-nav ul > li > a:focus, nav.vertical-nav ul > li > a:hover, nav.vertical-nav ul > li > a:active, nav.vertical-nav ul > li > a:focus { background-color: #D4D4D4; } /* Вертикальное меню */ nav.vertical-nav ul { width: 300px; } nav.vertical-nav ul > li { float: left; } nav.vertical-nav ul > li, nav.vertical-nav ul > li > a { width: 100%; } nav.vertical-nav ul > li > a { padding: 10px 0; text-align: center; }