<MyRusakov.ru />

Профессия Web-разработчик

Профессия Web-разработчик

Этот комплект за 8 месяцев превратит Вас в Web-разработчика с нуля. Учиться достаточно 1 час в день.

Начнёте Вы с HTML, CSS и вёрстки сайтов. Потом перейдёте к программированию и JavaScript. Затем изучите PHP, MySQL, SQL, Python. Изучите Web-фреймворки Laravel и Django. Создадите 5 своих сайтов для портфолио.

Комплект содержит:

- 540 видеоуроков

- 110 часов видео

- 1205 заданий для закрепления материала из уроков

- 5 финальных тестов

- 7 сертификатов

- 12 Бонусных курсов

Подробнее
Подписка

Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

YouTube Подписаться

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Какая тема Вас интересует больше?

Форум сайта MyRusakov.ru

CSS подмменю
17.04.2015 16:15:50 CSS подмменю Сообщение #1
marunevich

marunevich

Новичок

Новичок

Дата регистрации:
17.04.2015 15:49:50

Сообщений: 2

Добрый день!Не могу разобраться с подм
еню для своего сайта,
смотрел урок http://myrusakov.ru/css-submenu.html но у меня чуть по другому,нужно чтоб открывалось подменю при нажатии 
на выбор к примеру жанра новостей и не как в уроке в сторону а вниз отодвигая нижние блоки.Где что здесь поменять чтоб так получилось...Спасибоhttp://imagizer.imageshack.com/img909/3360/zr58LK.jpg
* {
color: #353535;
font-family: 'Ubuntu', Arial, Tahoma;
}
html {
background: #1e1e1e;
}
body {
background: #ffffff;
color: #353535;
font-size: 14px;
padding: 0;
margin: 0;
}
fieldset {
border: 1px solid #dadada;
padding: 8px 12px;
}
fieldset legend {
font-size: 14px;
color: #f3453c;
}
img {
outline: none;
border: none;
}
a, a:link, a:visited {
color: #353535;
font-size: 14px;
outline: none;
text-decoration: none;
}
a:hover {

}
input[type="radio"] {
vertical-align: -1px;
}
input[type="text"], input[type="password"], textarea, select {
background: #ffffff;
border: 2px solid #d9d9d9;
outline: none;
padding: 4px 3px 5px 3px;
}
input.button {
background: none !important;
border: 2px solid #464646 !important;
border-radius: 0px !important;
-moz-border-radius: 0px !important;
-webkit-border-radius: 0px !important;
color: #353535 !important;
cursor: pointer !important;
display: inline-block !important;
font-weight: bold !important;
height: 31px !important;
line-height: 15px !important;
margin: 0 5px !important;
outline: none !important;
padding: 0 12px !important;
}
input.button:hover {
border-color: #f3453c !important;
color: #f3453c !important;
}
input[type="submit"], input[type="button"], input[type="reset"], button.fbutton {
background: #f3453c;
border: none;
border-bottom: 2px solid #f3453c;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
box-shadow: none !important;
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
color: #ffffff;
cursor: pointer;
display: inline-block;
font-weight: normal !important;
height: 31px;
line-height: 29px;
margin: 0 5px;
outline: none;
padding: 0 12px;
text-shadow: none !important;
}
input[type="submit"]:hover, input[type="button"]:hover, input[type="reset"], button.fbutton:hover {
background: #454545;
border-bottom-color: #454545;
}
button.fbutton span {
color: #ffffff;
}
.resultbutton {
background: none !important;
border: none !important;
color: #353535 !important;
margin: 0 !important;
padding-right: 0 !important;
}
#voteresult-icon {
background: url('../images/icons2.png' no-repeat 100% -342px;
display: inline-block;
float: right;
height: 25px;
margin: 3px 0 0 7px;
width: 25px;
}
.resultbutton:hover {
color: #f3453c !important;
}
.resultbutton:hover #voteresult-icon {
background-position: 100% -367px;
}
h1, h1 a, h1 a span {
font-size: 21px !important;
font-weight: 300;
margin: 0;
}
h1 a:hover, h1 a:hover span {
color: #f3453c;
text-decoration: none;
}
h2, h2 a {
font-size: 19px !important;
font-weight: 300;
margin: 0;
}
h3, h3 a {
color: #f3453c !important;
font-size: 17px !important;
font-weight: 300;
margin: 0;
}
a.button, a.button:link, a.button:visited, #send-pm a {
background: #f3453c;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
color: #ffffff;
cursor: pointer;
display: inline-block;
height: 31px;
line-height: 29px;
margin: 0 5px;
padding: 0 12px;
}
a.button:hover, #send-pm a:hover {
background: #454545;
text-decoration: none;
}
#send-pm a {
margin: 10px 0 8px 0;
}
a.header-logo {
background: url('../images/logo.png' no-repeat;
display: inline-block;
height: 62px;
width: 246px;
}
div.header-menu-bg {
background: #1e1e1e;
height: 50px;
}
div.header-menu {
position: relative;
margin: 0 auto;
width: 996px;
}
#nav {
border-right: 1px solid #2d2d2d;
}
#nav, #nav ul, ul.block-menu2, ul.related {
display: block;
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#nav h2 {
padding: 4px 0 15px 8px;
}
#nav li {
display: block;
float: left;
position: relative;
}
#nav > li {
border-left: 1px solid #2d2d2d;
color: #909090;
}
#nav > li > a {
color: #909090;
display: block;
height: 50px;
line-height: 49px;
padding: 0px 12px;
}
#nav > li.dropIt > a {
background: url('../images/icons1.png' no-repeat 100% -184px;
padding-right: 39px;
}
#nav > li.dropIt:hover > a {
background-position: 100% -284px;
}
#nav > li > a span {
color: #515151;
display: inline-block;
padding-right: 2px;
}
#nav > li > a:hover {
color: #ffffff;
}
#nav > li > a:hover span {
color: #f3453c;
}
#nav li ul li, div.nav-miniprofile-content ul li, ul.block-menu2 li, ul.related li {
border: none;
color: #353535;
float: none;
}
#nav li ul li a, div.nav-miniprofile-content ul li a, ul.block-menu2 li a, ul.related li a  {
background: url('../images/icons1.png' no-repeat 10px 9px;
color: #353535 !important;
display: inline-block;
padding: 3px 12px 6px 22px !important;
text-decoration: none !important;
}
#nav li ul li a:hover, div.nav-miniprofile-content ul li a:hover, ul.block-menu2 li a:hover, ul.related li a:hover {
background: url('../images/icons1.png' no-repeat 10px -41px #f3453c;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
color: #ffffff !important;
}
#nav li > div, div.nav-miniprofile-content {
background: #ffffff;
border-top: 3px solid #f3453c;
box-shadow: 0 0 21px rgba(0,0,0,0.4);
-moz-box-shadow: 0 0 21px rgba(0,0,0,0.4);
-webkit-box-shadow: 0 0 21px rgba(0,0,0,0.4);
overflow: hidden;
left: -9999px;
margin-top: 0px;
position: absolute;
top: 50px;
min-width: 230px;
z-index: 99999;
}
#nav li > div > div {
overflow: hidden;
padding: 8px 12px 10px 12px;
position: relative;
}
#nav li.hover div.drop {
left: 0;
}
#nav > li.hover > a {
background-position: 100% -284px;
color: #ffffff;
}
#nav > li.hover > a > span {
color: #f3453c;
}
div.nav-miniprofile-content {
left: auto;
padding: 8px 12px;
right: 7px;
min-width: 200px;
}
div.nav-miniprofile-content ul {
list-style: none;
margin: 0;
padding: 0;
}
#nav-miniprofile-link {
float: right;
height: 35px;
margin-top: 1px;
padding: 7px;
position: relative;
text-align: right;
}
#nav-miniprofile-link a, #nav-miniprofile-link a span {
color: #909090;
display: inline-block;
font-size: 15px;
line-height: 15px;
}
#nav-miniprofile-link a:hover, #nav-miniprofile-link a:hover span {
color: #ffffff;
text-decoration: none;
}
#nav-miniprofile-link span#subtext {
color: #515151;
display: block;
font-size: 12px;
line-height: 16px;
}
#nav-miniprofile-link a:hover span#subtext {
color: #f3453c;
}
#nav-miniprofile-link span.avatar {
float: right;
padding-left: 12px;
}
#nav-miniprofile-link span.avatar img {
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
height: 34px;
width: 34px;
}
#nav-miniprofile-link a.new-pm {
background: #f3453c;
border: 2px solid #1e1e1e;
border-radius: 16px;
-moz-border-radius: 16px;
-webkit-border-radius: 16px;
color: #ffffff;
display: inline-block;
font-size: 11px;
height: 16px;
line-height: 15px;
position: absolute;
right: 0;
text-align: center;
top: 0;
  width: 16px;
}
div.location-bg {
background: #4790d2;
border-top: 1px solid #4790d2;
color: #ffffff !important;
margin-bottom: 19px;
min-height: 45px;
}
div.location-content {
background: url('../images/icons1.png' no-repeat 0 -390px;
margin: 0 auto;
min-height: 45px;
padding-left: 34px;
width:  962px;
}
div.location-links {
padding: 12px 270px 11px 0;
}
div.location-bg a {
background: url('../images/icons1.png' no-repeat 0 -44px;
color: #ffffff !important;
display: inline-block;
height: 20px;
line-height: 19px;
padding: 0 10px 0 14px;
}
div.location-bg a span {
color: #ffffff;
}
div.search-bg {
background: #4790d2;
border: 1px solid #F9FF00;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
float: right;
height: 28px;
padding: 0 3px 0 12px;
margin-top: 7px;
width: 233px;
}
div.search-bg input[type="text"] {
background: none;
border: none;
color: #ffffff;
display: inline-block;
font-style: italic;
height: 16px;
margin-top: 5px;
padding: 0;
width: 200px;
}
div.search-bg input[type="submit"] {
background: url('../images/icons1.png' no-repeat 5px -495px;
border: none;
float: right;
height: 28px;
vertical-align: top;
margin: 0;
padding: 0;
width: 28px;
}
div.global-container {
margin: 0 auto;
overflow: hidden;
position: relative;
width: 1046px;
}
div.content-left-column {
float: left;
margin-right: 28px;
width: 718px;
}
div.content-right-column {
float: left;
width: 250px;
}
div.module-title {
padding: 11px 0 19px 0;
}
a.module-title-articles {
background: url('../images/icons1.png' no-repeat 100% -526px;
cursor: pointer;
display: inline-block;
float: right;
font-size: 15px;
height: 25px;
line-height: 23px;
margin-top: 3px;
padding-right: 33px;
}
a.module-title-articles:hover {
background-position: 100% -551px;
color: #f3453c;
text-decoration: none;
}
div.articles {
margin: 0;
width: 718px;
}
div.articles-film-cuted {
width: 740px;
}
.article-film {
display: inline-block;
margin-right: 22px;
min-height: 300px;
padding-bottom: 16px;
position: relative;
vertical-align: top;
width: 163px;
}
.article-favorite a {
cursor: pointer;
display: inline-block;
height: 30px;
position: absolute;
right: 6px;
top: 6px;
width: 30px;
z-index: 10;
}
.article-favorite a img {
height: 30px;
width: 30px;
}
img.article-film-edit {
cursor: pointer;
background: url('../images/icons1.png' no-repeat 0 -774px;
height: 16px;
position: absolute;
right: 13px;
top: 42px;
width: 16px;
z-index: 10;
}
img.article-film-edit:hover {
background-position: 0 -790px;
}
.article-film-image {
height: 230px;
margin-bottom: 12px;
overflow: hidden;
position: relative;
width: 163px;
}
.article-film-badge {
display: none;
}
.article-film-overlay {
background: url('../images/article-film-bg.png';
color: #ffffff;
display: none;
height: 230px;
opacity: 0;
position: absolute;
top: -100px;
width: 163px;
z-index: 5;
}
.article-film-overlay-content {
height: 173px;
padding: 12px 10px 0 10px;
position: relative;
}
.article-film-overlay-content a {
display: inline-block;
}
.article-film-overlay-content a:hover span {
text-decoration: underline;
}
.article-film-date {
background: url('../images/icons1.png' no-repeat 0 -726px;
color: #ffffff;
display: inline-block;
font-size: 13px;
height: 18px;
line-height: 18px;
padding-left: 23px;
}
.article-film-date a, .article-film-date span {
color: #ffffff;
font-size: 13px;
}
.full-article-film-date {
background: url('../images/article-film-bg.png';
bottom: 0;
padding: 8px 12px;
position: absolute;
}
.article-film-info {
bottom: 5px;
color: #ffffff;
font-size: 13px;
position: absolute;
}
.article-film-play {
border: 2px solid #ffffff;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
color: #ffffff;
cursor: pointer;
display: inline-block;
font-size: 13px;
height: 27px;
line-height: 26px;
position: absolute;
right: 15px;
text-align: center;
top: 88px;
width: 129px;
}
.article-film-play:hover {
border-color: #f3453c;
color: #f3453c;
text-decoration: none !important;
}
.article-film-descr {
display: none;
left: 160px;
opacity: 0;
position: absolute;
top: 147px;
width: 280px;
z-index: 15;
}
.article-film-descr-content {
background: #f3453c;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
color: #ffffff;
font-size: 13px;
margin-left: 14px;
padding: 6px 8px 8px 8px;
}
.article-film-descr-bottom {
    border-top: 7px solid transparent;
    border-right: 7px solid #f3453c;
    border-bottom: 7px solid transparent;
    border-left: 7px solid transparent;
    float: left;
    margin-top: 12px;
}
.article-film-show-descr {
background: url('../images/icons2.png' no-repeat 0 -655px;
bottom: 10px;
cursor: pointer;
display: inline-block;
height: 20px;
position: absolute;
right: 11px;
width: 20px;
}
.article-film-show-descr:hover {
background-position: 0 -675px;
}
.article-film-rating {
display: none;
opacity: 0;
position: absolute;
top: 230px;
width: 163px;
z-index: 6;
}
.rating-icon-minus, .rating-icon-plus {
background: url('../images/icons2.png' no-repeat 0 -611px;
float: left;
height: 22px;
margin-top: 9px;
width: 14px;
}
.rating-icon-plus {
background-position: 100% -633px;
float: right;
}
.article-film-rating-stars {
background: #F24F47;
border-top: 3px solid #F24F47;
color: #ffffff;
padding: 7px 0 11px 0;
}
.article-film-rating-stars ul {
display: inline-block;
}
.article-film-rating-stars a, .article-film-rating-stars b, .article-film-rating-stars span {
color: #ffffff !important;
font-size: 13px;
font-weight: normal;
}
.articles-film-soon .article-film-badge, .articles-film-popular .article-film-badge {
background: url('../images/badges.png' no-repeat;
display: block;
height: 76px;
position: absolute;
width: 76px;
z-index: 2;
}
.articles-film-popular .article-film-badge {
background-position: -163px 0;
}
img.article-img {
height: 230px;
width: 163px;
}
img.article-img-full {
width: 200px;
}
.article-film-title {
padding-bottom: 2px;
}
.article-film-title a {
font-size: 15px;
}
.article-film-categories {
color: #797979;
font-size: 13px;
}
.article-film-categories a {
color: #797979;
font-size: 13px;
text-decoration: underline;
}
.article-film-categories a:hover {
color: #f3453c;
text-decoration: none;
}
div#article-film-full-info {
color: #797979;
font-size: 14px;
font-weight: normal !important;
padding-top: 5px;
}
div#article-film-full-info a {
font-size: 14px !important;
font-weight: normal !important;
}
div#article-film-full-info span {
color: #353535;
}
span#article-full-separator {
color: #dadada !important;
display: inline-block;
font-weight: 300;
padding: 0 8px;
}
table#article-film-full-info td {
border-bottom: 1px solid #ececec;
padding: 9px 0 10px 0;
vertical-align: top;
}
table#article-film-full-info td span {
color: #797979;
}
.popup-profile-table {
border-top: 1px solid #ececec;
}
.popup-profile-table td {
padding: 6px 0 8px 0 !important;
}
#article-film-full-poster-bg {
background: url('../images/noposter.png' #797979 no-repeat 50%;
position: relative;
}
.comment-avatar {
float: left;
width: 70px;
}
.comment-avatar img {
width: 70px;
}
.comment-avatar * {
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
#comment-status-online, #comment-status-offline {
background: #5ED62F;
font-size: 13px;
color: #ffffff;
height: 19px;
line-height: 18px;
margin-top: 5px;
text-align: center;
text-shadow: 0 -1px 0 #47B31C;
}
#comment-status-offline {
background-color: #797979;
text-shadow: 0 -1px 0 #656565;
}
#comment-group, #comment-group b, #comment-group span {
color: #797979;
font-size: 13px;
font-weight: normal;
text-decoration: underline;
}
.comment-text {

padding-left: 17px;
}
ul.comment-actions {
list-style: none;
margin: 0;
padding: 0;
}
ul.comment-actions li {
display: block;
float: left;
min-height: 20px;
}
ul.comment-actions li a {
color: #797979;
font-size: 13px;
margin: 0px 8px;
}
ul.comment-actions li a:hover {
color: #f3453c;
text-decoration: none;
}
#comment-actions-checkbox {
float: right;
padding-right: 12px;
}
#comment-actions-checkbox input[type="checkbox"] {
margin: 2px 0 0 0 !important;
}
.signature, .signature * {
border-top: 1px dotted #dadada;
color: #797979;
font-size: 13px !important;
margin-top: 10px;
padding-top: 8px;
}
.mass_comments_action {
border-bottom: 1px solid #ececec;
margin-bottom: 10px;
padding-bottom: 12px;
}
.popup-avatar {
float: left;
width: 100px;
}
.popup-avatar * {
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
#dle-captcha * {
vertical-align: top;
}
#dle-captcha br, #dle-comments-form br {
display: none !important;
}
#dle-captcha * br, #dle-comments-form * br {
display: inline;
}
#dle-captcha a {
border: 2px solid #464646;
color: #353535;
cursor: pointer;
display: inline-block;
font-size: 12px;
height: 27px;
line-height: 26px;
margin: 45px 0 0 8px;
text-align: center;
text-transform: uppercase;
width: 214px;
}
#dle-captcha a:hover {
border-color: #f3453c;
color: #f3453c;
text-decoration: none;
}
input.security_code {
height: 20px;
line-height: 19px;
margin: 4px 0 0 0;
position: absolute;
right: 0;
width:208px;
}
#add-comment-code {
display: inline-block;
padding: 10px 0 5px 10px;
position: relative;
}
hr {
background: #dadada;
border: none;
height: 1px;
margin: 8px 0;
}
hr.light {
background: #ececec;
margin: 10px 0 8px 0;
}
div.article-add-field-description {
padding-bottom: 5px;
}
div.addvote input[type="text"], div.addvote textarea {
border-color: #f3453c;
}
div.xfields {
color: #797979;
}
div.xfields input[type="text"], div.xfields textarea {
margin-top: 5px;
padding: 4px 3px 5px 3px !important;
width: 414px;
}
div.xfields table td {
padding-bottom: 10px;
vertical-align: top;
}
div.xfields .addnews {
width: 280px;
}
div.fieldsubmit {
padding-top: 10px;
}
a.icon-key, a.icon-register, a.icon-search, a.icon-list, a.icon-mobile {
background: url('../images/icons1.png' no-repeat;
display: inline-block;
margin: 3px 0;
padding-left: 18px;
}
a.icon-key {
background-position: 0 -894px;
}
a.icon-register {
background-position: 0 -874px;
}
a.icon-search, a.icon-list, a.icon-mobile {
background: url('../images/icons1.png' no-repeat;
display: inline-block;
height: 19px;
line-height: 19px;
margin: 5px 0;
padding-left: 21px;
}
a.icon-search {
background-position: 0 -809px;
}
a.icon-list {
background-position: 0 -829px;
}
a.icon-mobile {
background-position: 0 -852px;
}
span.stat-quantity {
background: #00D8FF;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
color: #ffffff !important;
display: inline-block;
margin: 0 3px;
padding: 2px 8px 4px 8px;
text-align: center;
}
span.stat-quantity2 {
background: #32cd32;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
color: #ffffff !important;
display: inline-block;
margin: 0 3px;
padding: 2px 8px 4px 8px;
text-align: center;
}
div.custom-sort-menu {
display: inline-block;
margin: 0 0 15px 10px;
position: relative;
text-align: left;
width: 185px;
z-index: 15;
}
div.custom-sort-menu a.current-sort {
background: url('../images/icons1.png' no-repeat 100% -137px;
border: 2px solid #d9d9d9;
cursor: pointer;
display: block;
font-weight: bold;
height: 31px;
line-height: 30px;
padding: 0 10px;
}
a.current-sort-inverse {
background-position: 100% -932px !important;
}
div.custom-sort-menu a.current-sort:hover, div.custom-sort-menu a.current-sort:hover span {
border-color: #f3453c;
color: #f3453c;
text-decoration: none;
}
div.current-sort-active > a {
border-color: #f3453c !important;
}
div.current-sort-active > a, div.current-sort-active > a span {
color: #f3453c;
}
div.custom-sort-menu ul {
background: #ffffff;
border: 2px solid #f3453c;
border-top: none;
left: 0;
list-style: none;
margin: 0;
padding: 0;
position: absolute;
top: 33px;
width: 181px;
}
div.custom-sort-menu ul li {
margin: 0;
padding: 0;
}
div.custom-sort-menu ul li a {
border-top: 1px solid #dadada;
cursor: pointer;
display: block;
height: 30px;
line-height: 28px;
padding: 0 10px;
}
div.custom-sort-menu ul li a:hover {
background: #f3453c;
border-top: 1px solid #3273a9;
color: #ffffff;
text-decoration: none;
}
div.custom-sort-menu ul li a:hover span {
color: #ffffff;
}
div.block-title {
background: url('../images/block-title-separator.png' repeat-x 0 100%;
margin-bottom: 5px;
min-height: 29px;
padding: 11px 8px 13px 8px;
}
div.block-title div.icon-menu {
background: url('../images/icons2.png' no-repeat;
float: left;
height: 29px;
margin-right: 9px;
width: 29px;
}
div.block-title div.icon-calendar {
background: url('../images/icons2.png' no-repeat 0 -58px;
float: left;
height: 29px;
margin-right: 9px;
width: 29px;
}
div.block-title div.icon-poll {
background: url('../images/icons2.png' no-repeat 0 -87px;
float: left;
height: 29px;
margin-right: 9px;
width: 29px;
}
div.block-title div.icon-news {
background: url('../images/icons2.png' no-repeat 0 -145px;
float: left;
height: 29px;
margin-right: 9px;
width: 29px;
}
div.block-red {
border-bottom: 0px solid #f3453c;
}
div.block-black {
border-bottom: 2px solid #515151;
}
div.block-title-text {
font-size: 17px;
padding: 2px 0 6px 0;
}
ul.block-menu {
list-style: none;
margin: 0;
padding: 0;
}
ul.block-menu > li {
border-bottom: 1px solid #dadada;
margin: 0;
overflow: hidden;
padding: 0;
}
ul.block-menu  li  a {
cursor: pointer;
}
ul.block-menu > li > a {
background: url('../images/icons2.png' no-repeat 100% -408px;
display: block;
padding: 7px 20px 10px 10px;
}
ul.block-menu > li > a:hover {
background-position: 100% -458px;
color: #f3453c;
}
ul.block-menu > li > a span {
color: #adadad;
display: inline-block;
padding-right: 3px;
}
ul.block-menu > li > a.accordion {
background: url('../images/icons1.png' no-repeat 100% -87px;
}
ul.block-menu > li > a.accordion:hover {
background-position: 100% -978px;
}
ul.block-menu > li > a.accordion-opened {
background-position: 100% -135px;
color: #f3453c;
}
ul.block-menu > li > a.accordion-opened:hover {
background-position: 100% -135px;
text-decoration: none;
}
div.block-menu2 {
height: 0;
}
ul.block-menu2 {
float: none;
padding-left: 23px;
}
ul.related {
padding-top: 5px;
float: none;
}
div.block-separator {
background: #dadada;
height: 1px;
margin-bottom: 5px;
}
.vresult {
background: url('../images/icons2.png' no-repeat 100% -294px;
color: #797979;
cursor: pointer;
display: inline-block;
float: right;
height: 24px;
line-height: 23px;
margin-top: 3px;
padding-right: 31px;
}
.vresult:hover {
background-position: 100% -318px;
color: #464646;
text-decoration: none;
}
.comment-style-bg1, .comment-style-bg2 {
background: #ffffff;
border: 2px solid #f3453c;
border-bottom-width: 0;
color: #f3453c;
font-weight: bold;
padding: 6px 10px 9px 10px;
}
.comment-style-bg2 {
border-color: #dadada;
}
.comment-style-bottom1, .comment-style-bottom1 div, .comment-style-bottom2, .comment-style-bottom2 div {
background: url('../images/comment-block-bottom.png' repeat-x;
height: 11px;
}
.comment-style-bottom1 div {
background-position: 29px -11px;
background-repeat: no-repeat;
}
.comment-style-bg2 {
color: #797979;
font-weight: normal;
}
.comment-style-bottom2 {
background-position: 0 -22px;
}
.comment-style-bottom2 div {
background-position: 29px -33px;
background-repeat: no-repeat;
}
.dle-comments-navigation #page-switchers {
margin-right: 0;
}
#pages .masha_index {
height: 30px !important;
line-height: 29px !important;
margin: 0 !important;
min-width: 0 !important;
padding: 0 !important;
}
#vote-list, #dle-poll-list {
border-bottom: 1px solid #ececec;
margin-bottom: 10px;
padding: 6px 10px 10px 1px;
}
#vote-list div, #dle-poll-list div {
font-size: 13px;
padding: 2px 0;
}
.error-block {
background: url('../images/icons2.png' #f3453c no-repeat 10px -702px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
color: #ffffff;
margin: 10px 0;
min-height: 30px;
padding: 10px 10px 12px 50px;
}
.error-block a {
color: #ffffff;
text-decoration: underline;
}
.error-block a:hover {
text-decoration: none;
}
.error-block * {
color: #ffffff !important;
}
#page-switchers {
border-top: 1px solid #ececec;
height: 42px;
margin-right: 22px;
padding-top: 8px;
}
#page-switchers .page-next, #page-switchers .page-prev {
background: url('../images/icons1.png' no-repeat 100% -576px;
color: #797979;
display: inline-block;
float: right;
font-size: 15px;
height: 25px;
line-height: 23px;
margin-top: 8px;
padding-right: 31px;
}
#page-switchers .page-prev {
background-position: 0 -651px;
margin-right: 20px;
padding: 0 0 0 31px;
}
#page-switchers a .page-next {
background-position: 100% -526px;
color: #353535;
}
#page-switchers a:hover .page-next {
background-position: 100% -551px;
color: #f3453c;
}
#page-switchers a .page-prev {
background-position: 0 -601px;
color: #353535;
}
#page-switchers a:hover .page-prev {
background-position: 0 -626px;
color: #f3453c;
}
#pages {
font-size: 13px;
font-weight: 300;
}
#pages a, #pages span {
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
color: #353535;
display: inline-block;
float: left;
height: 30px;
line-height: 29px;
margin: 6px 5px 6px 0;
min-width: 22px;
padding: 0 4px;
text-align: center;
}
#pages a:hover {
background: #f3453c;
color: #ffffff;
text-decoration: none;
}
#pages span {
background: #515151;
color: #ffffff;
}
.nav_ext {
background: none !important;
color: #353535 !important;
padding: 0 !important;
}
.profile-avatar {
float: left;
position: relative;
width: 130px;
}
.profile-avatar-bg {
background: #F24F47;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
height: 55px;
margin-top: 85px;
width: 130px;
}
.profile-avatar-image-bg {
background: #ffffff;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
top: 0px;
height: 100px;
left: 11px;
position: absolute;
padding: 4px;
width: 100px;
}
.profile-avatar-image-bg img {
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
height: 100px;
width: 100px;
}
.profile-rating {
position: absolute;
top: 115px;
left: 12px;
}
.profile-info {
padding-left: 145px;
}
form[name="pmlist"] table.pm {
display: none;
}
a.tab-active {
background: #f3453c;
border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
color: #ffffff !important;
}
#inbox a, #outbox a, #newpm a {
color: #515151;
cursor: pointer;
display: inline-block;
float: left;
height: 33px;
line-height: 30px;
padding: 0 12px;
}
#inbox a:hover, #outbox a:hover, #newpm a:hover {
border-color: #f3453c;
color: #f3453c;
text-decoration: none;
}
#pm-table {
border-bottom: 1px solid #dadada;
}
#pm-table td {
padding: 5px 0;
}
.pm-table-checkbox {
border-left: 1px solid #dadada;
border-right: 1px dotted #dadada;
border-top: 1px solid #dadada;
text-align: center;
width: 45px;
}
.pm-table-title {
border-top: 1px solid #dadada;
padding: 5px 10px !important;
}
.pm-table-title a {
display: inline-block;
}
.pm-table-title a b {
font-weight:  normal;
}
.pm-table-title div {
color: #797979;
}
.pm-table-info {
border-left: 1px dotted #dadada;
border-right: 1px solid #dadada;
border-top: 1px solid #dadada;
color: #797979;
font-size: 13px;
padding-right: 12px !important;
text-align: right;
width: 120px;
}
.pm-table-info a {
font-size: 13px;
}
.pm-table-info div {
color: #f3453c;
padding-top: 2px;
}
#pm-unreaded {
background: #f8f8f8;
}
#pm-moder {
padding: 10px 0 2px 0;
text-align: right;
}
#pm-moder input[type="submit"], #pm-moder select {
margin: 0;
}
#pm-moder input[type="submit"] {
height: 29px;
line-height: 28px;
padding: 0 10px;
}
#pm-info {
border: 1px solid #dadada;
margin-bottom: 8px;
padding: 7px 12px;
}
.news-article {
clear: both;
padding: 0 22px 15px 50px;
position: relative;
}
#news-date-day {
background: #ffffff;
border: 2px solid #f3453c;
border-radius: 31px;
-moz-border-radius: 31px;
-webkit-border-radius: 31px;
color: #f3453c;
font-size: 18px;
font-weight: 300;
height: 21px;
left: 0;
line-height: 19px;
padding: 6px 7px 6px 6px;
position: absolute;
text-align: center;
top: 0;
width: 20px;
}
#news-date-month {
background: #f3453c;
border-radius: 0 0 37px 37px;
-moz-border-radius: 0 0 37px 37px;
-webkit-border-radius: 0 0 37px 37px;
color: #ffffff;
font-size: 13px;
left: 0;
height: 14px;
padding: 17px 0 8px 0;
position: absolute;
text-align: center;
top: 19px;
width: 37px;
}
#news-date-year {
color: #f3453c;
font-size: 13px;
left: 0;
position: absolute;
text-align: center;
top: 61px;
width: 37px;
}
#news-bottom-descr {
float: right;
height: 33px;
}
#news-bottom-descr * {
vertical-align: top;
}
#news-favorite-edit {
background: url('../images/article-film-bg.png';
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
float: right;
padding: 3px 6px 3px 8px;
}
.news-edit, .news-favorite {
display: block;
float: right;
}
.news-edit a, .news-favorite a {
display: block;
}
.news-edit a {
margin: 7px 10px 0 0;
}
.news-edit a img {
cursor: pointer;
background: url('../images/icons1.png' no-repeat 0 -774px;
height: 16px;
width: 16px;
}
.news-edit a:hover img {
background-position: 0 -790px;
}
.btags {
border: 2px solid #f3453c;
margin-top: 10px;
    padding: 8px 12px 9px 12px;
    position: relative;
}
.btags a:hover {
    color: #f3453c;
}
div.footer-bg1 {
background: #292929;
height: 52px;
margin-top: 30px;
}
div.footer-bg1-content {
margin: 0 auto;
width: 996px;
}
div.footer-bg1-content a {
color: #909090;
display: inline-block;
height: 25px;
line-height: 24px;
margin: 13px 25px 13px 0;
}
div.footer-bg1-content a:hover {
color: #ffffff;
text-decoration: none;
}
a.footer-slideup {
background: url('../images/icons1.png' no-repeat 100% -676px;
cursor: pointer;
float: right;
margin-right: 0 !important;
padding-right: 33px;
}
a.footer-slideup:hover {
background-position: 100% -701px;
}
div.footer-separator {
background: #141414;
border-bottom: 1px solid #1a1a1a;
border-top: 1px solid #313131;
height: 1px;
}
div.footer-bg2 {
background: #1e1e1e;
}
div.footer-bg2-content {
color: #909090;
margin: 0 auto;
padding: 25px 0 29px 0;
width: 996px;
}
div.footer-bg2-content a {
color: #909090;
text-decoration: underline;
}
div.footer-bg2-content a:hover {
color: #ffffff;
text-decoration: none;
}
div.footer-bg2-content div.social {
float: right;
margin-top: 11px;
}
div.footer-bg2-content div.social ul {
display: block;
list-style: none;
margin: 0;
padding: 0;
}
div.footer-bg2-content div.social ul li {
background: url('../images/social.png' no-repeat;
display: block;
float: left;
margin: 0 0 0 8px;
padding: 0;
}
div.footer-bg2-content div.social ul li.vk:hover {
background-position: -36px 0;
}
div.footer-bg2-content div.social ul li.fb {
background-position: 0 -36px;
}
div.footer-bg2-content div.social ul li.fb:hover {
background-position: -36px -36px;
}
div.footer-bg2-content div.social ul li.tw {
background-position: 0 -72px;
}
div.footer-bg2-content div.social ul li.tw:hover {
background-position: -36px -72px;
}
div.footer-bg2-content div.social ul li.gplus {
background-position: 0 -108px;
}
div.footer-bg2-content div.social ul li.gplus:hover {
background-position: -36px -108px;
}
div.footer-bg2-content div.social ul li a {
cursor: pointer;
display: block;
height: 36px;
width: 36px;
}
div.footer-bg2-content span.separator {
color: #515151;
display: inline-block;
padding: 0 8px;
}
div.footer-bg2-content div.description {
color: #515151;
padding-top: 6px;
}
div.footer-bg2-content div.description a {
color: #515151;
}
div.footer-bg2-content div.description a:hover {
color: #909090;
}
.zag {
    font-size: 21px !important;
    font-weight: 300;
    margin: 0;
    color: #00D8FF;
    }
.zag2 {
   font-size: 21px !important;
    font-weight: 300;
    margin: 0;
    color: #f3453c;
    }
.zag3 {
    font-size: 21px !important;
    font-weight: 300;
    margin: 0;
    color:#32CD32;
    }
.zag4 {
    font-size: 21px !important;
    font-weight: 300;
    margin: 0; 
    color:#FFA500;
    }
/* ???? ????*/
.m-rating-area{height:80px;display:inline-block;margin:15px 0;padding-left:90px;border:1px solid #ddd;position:relative;}
.m-error{position:absolute;top:5px;right:5px;padding:0 15px;display:none;border:1px solid #db4a39;-moz-border-radius:
3px;-webkit-border-radius:3px;border-radius:3px;font:normal 12px/28px Arial;color:#444;}
.m-load{background:#f0f0f0 url('{THEME}/images/m_load.gif' 50% 50% no-repeat !important;}
/* ????????? ??????? */
.m-rating-rate{float:left;margin-left:-90px;width:80px;border-right:1px solid #ddd;font:bold 27px/60px Arial;text-align:c
enter;color:#777;height:80px;text-shadow:0 1px #fff;-moz-box-shadow:inset 0 1px 1px #fcfcfc;-webkit-box-shadow:inset 0
1px 1px #fcfcfc;box-shadow:inset 0 1px 1px #fcfcfc;}
/* ?????????? ??????? ? ????????? ???????? */
.m-rating-rate-votes{font:normal 11px/20px Arial;margin-top:-15px;text-shadow:none;}
/* ????????? 2 ??????? */
.m-rating-column{width:180px;float:left;height:80px;}
/* ??????? ?????? ???????? */
.m-rating-field{padding:5px 0 5px 40px;height:30px;}
/* ?????? */
.m-rating-value{float:left;cursor:pointer;margin-left:-40px;width:30px;height:30px;color:#fff;font:bold 15px/30px
Arial;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,0.25);-moz-box-shadow:0 1px 0 #fff;-webkit-box-shadow:0 1px 0 #fff;
box-shadow:0 1px 0 #fff;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;}
.m-rating-field:hover .m-rating-value{background:#ef622a;}
/* ??? ??????? */
.m-rating{margin:0;padding:0;list-style:none;}
.m-rating:after{content:"";display:table;clear:both;}
.m-rating li{float:left;padding:0 1px;}
.m-rating li span{display:block;width:10px;height:10px;border-radius:5px;background:#ccc;text-i
ndent:-10000px;cursor:pointer;-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,0.25), 0 1px 0 #fff;-webkit-box-shadow:inset 0 1p
x 1px rgba(0,0,0,0.25), 0 1px 0 #fff;box-shadow:inset 0 1px 1px rgba(0,0,0,0.25), 0 1px 0 #fff;}
.m-rating li.m-current span{background:#44a0de;}
.m-rating li.m-hover span{background:#ef622a}
/* CSS3 gradients & backgrounds */
.m-rating-area{
background:#fcfcfc;
background: -moz-linear-gradient(top,  rgba(253,253,253,1) 0%, rgba(250,250,250,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(253,253,253,1)), color-stop(100%,rgba(250
,250,250,1)));
background: -webkit-linear-gradient(top,  rgba(253,253,253,1) 0%,rgba(250,250,250,1) 100%);
background: -o-linear-gradient(top,  rgba(253,253,253,1) 0%,rgba(250,250,250,1) 100%);
background: -ms-linear-gradient(top,  rgba(253,253,253,1) 0%,rgba(250,250,250,1) 100%);
background: linear-gradient(to bottom,  rgba(253,253,253,1) 0%,rgba(250,250,250,1) 100%);
filter: progidXImageTransform.Microsoft.gradient( startColorstr='#fdfdfd', endColorstr='#fafafa',GradientType=0 );
}
.m-rating-rate{
background:#f0f0f0;
background: -moz-linear-gradient(top,  rgba(245,245,245,1) 0%, rgba(234,234,234,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(245,245,245,1)), color-stop(100%,rgba(234,
234,234,1)));
background: -webkit-linear-gradient(top,  rgba(245,245,245,1) 0%,rgba(234,234,234,1) 100%);
background: -o-linear-gradient(top,  rgba(245,245,245,1) 0%,rgba(234,234,234,1) 100%);
background: -ms-linear-gradient(top,  rgba(245,245,245,1) 0%,rgba(234,234,234,1) 100%);
background: linear-gradient(to bottom,  rgba(245,245,245,1) 0%,rgba(234,234,234,1) 100%);
filter: progidXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#eaeaea',GradientType=0 );
}
.m-rating-value{
background:#44a0de;
background: -moz-linear-gradient(top,  rgba(72,169,234,1) 0%, rgba(64,151,209,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(72,169,234,1)), color-stop(100%,rgba(64,151,209,1)));
background: -webkit-linear-gradient(top,  rgba(72,169,234,1) 0%,rgba(64,151,209,1) 100%);
background: -o-linear-gradient(top,  rgba(72,169,234,1) 0%,rgba(64,151,209,1) 100%);
background: -ms-linear-gradient(top,  rgba(72,169,234,1) 0%,rgba(64,151,209,1) 100%);
background: linear-gradient(to bottom,  rgba(72,169,234,1) 0%,rgba(64,151,209,1) 100%);
filter: progidXImageTransform.Microsoft.gradient( startColorstr='#48a9ea', endColorstr='#4097d1',GradientType=0 );
}
.m-error{
background:#fafafa;
background: url(data:image/svg+xml;base64,MTY2MjMxMTc4NTk1+PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG
5zPSJodHRwOi8v
d3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmV
Bc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaX
RzPSJ1c2VyU3BhY2VPblVzZSIgeD
    E9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3R
vcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmNWY1ZjUiIHN0b3Atb3BhY2l0eT0iMSI
vPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncm
FkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(245,245,245,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(245,245,245,1)));
background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(245,245,245,1) 100%);
background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(245,245,245,1) 100%);
background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(245,245,245,1) 100%);
background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(245,245,245,1) 100%);
filter: progidXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f5f5f5',GradientType=0 );
}
.logonew a {
font: 27px 'Ubuntu',Arial,Tahoma;
}
.bhead {
float: right;
margin-right: 290px;
margin-top: -16px;
}
.rban{
}
.uppod_style_video {
  width: 500px;
  height: 375px;
}
.uppod_style_audio {
    width: 300px;
    height: 35px;
}
Профиль
17.04.2015 20:45:24 CSS подмменю Сообщение #2
Alien

Alien

Новичок

Новичок

Дата регистрации:
26.09.2014 17:32:23

Сообщений: 18

Что бы оно появлялось при клике необходимо JavaScript(jQuery)
Профиль
17.04.2015 22:01:58 CSS подмменю Сообщение #3
marunevich

marunevich

Новичок

Новичок

Дата регистрации:
17.04.2015 15:49:50

Сообщений: 2

а если без клика,можешь помочь в решении вопроса?тогда уже будет
актуальнее если подменю в сторону уходитьбудет,а не так как я хотел вниз )
Профиль
18.04.2015 06:19:02 CSS подмменю Сообщение #4
Генадий

Генадий

Новичок

Новичок

Дата регистрации:
26.10.2014 06:05:04

Сообщений: 3

в общем всё просто - https://jsfiddle.net/atlanta/k6fpw5cm/ - здесь код и вёрстка
а здесь адаптированное меню - https://jsfiddle.net/atlanta/k6fpw5cm/1/ -
в общем писать не сложно это - просто css
Профиль
18.04.2015 14:24:24 CSS подмменю Сообщение #5
Alien

Alien

Новичок

Новичок

Дата регистрации:
26.09.2014 17:32:23

Сообщений: 18

Честно говоря не понял суть вопроса.
А вообще скрин (в вашем первом сообщении) я полагаю там меню отображается при наведении? Как по мне так на много лучше. Иначе вот мы при клике показали меню, а если он случайно нажал? как убрать? это много вопросов.
Профиль