...
HTML |
---|
<style> #nav ul.subs_services { background-color: #FFFFFF; background-image: url(http://www.teamlead.ru/download/attachments/128516724/%D0%BF%D0%BB%D0%B0%D1%88%D0%BA%D0%B0--expert-platimun-%D0%B4%D0%BB%D1%8F-%D0%BC%D0%B5%D0%BD%D1%8E.png?api=v2); /* Путь к фоновому изображению */ background-position: 10px200px 200px; /* Положение фона */ 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: 280px; /* Ширина блока в подменю */ } #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> |