...
HTML |
---|
<style>
#nav ul.subs_services {
background-color: #FFFFFF;
background-position: 0px -300px; /* Положение фона */
background-repeat: no-repeat;
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); /* Путь к фоновому изображению */
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> |