...
HTML |
---|
<style> /* Сервисы */ #nav ul.subs_services { background-color: #FFFFFF; box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2); color: #333333; display: none; left: 3px; padding: 2%; position: absolute; top: 39px; /* Отступ выпадающего меню от полосы главного меню */ width: 915px; border-top: 1px solid #205081; /* Линия сверху всплывающего подменю */ } /* submenu */ #nav li:hover ul.subs_services { display: block; } #nav ul.subs_services > li { display: inline-block; float: none; padding: 10px 1%; vertical-align: top; width: 190px280px; /* Ширина блока в подменю */ } #nav ul.subs_services > li a { color: #205081; /* Цвет текста подменю */ line-height: 20px; } #nav ul.subs_services > li > a { font-size: 1.3em; margin-bottom: 10px; /* text-transform: uppercase; */ } #nav ul.subs_services > li li { float: none; padding-left: 8px; -moz-transition: padding 150ms ease-out 0s; -ms-transition: padding 150ms ease-out 0s; -o-transition: padding 150ms ease-out 0s; -webkit-transition: padding 150ms ease-out 0s; transition: padding 150ms ease-out 0s; } #nav ul.subs_services > li li:hover { padding-left: 5px; /* Смещение пункта подменю при наведении мышки */ } /* responsive rules */ @media all and (max-width : 900px) { #nav > li { float: none; border-bottom: 0; margin-bottom: 0; } #nav ul.subs_services { position: relative; top: 0; } #nav li:hover ul.subs_services { display: none; } #nav li #s1:target + ul.subs_services, #nav li #s2:target + ul.subs { display: block; } #nav ul.subs_services > li { display: block; width: auto; } } </style> |