Здравствуйте. Не могу сообразить, где исправить стиль для активного и неактивного подпункта меню. Вот как выглядит меню сейчас:
А вот как выглядит активный подпункт (в данном случае "две двери"):
Как видите, пиктограмма справа отображается почти правильно (хотя хотелось бы чтобы на родительском пункте она была всё-таки неактивной). Такое отображаение естественно никуда не годится, надо чтобы все пункты были белые (неактивные) а активный подпункт - чёрный. Вот мой код CSS, связанный с данным блоком:
#left ul {
list-style:none;
margin-right:10px;
}
#left ul.menu li.active a {
color:#333333;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
font-weight: 600;
text-decoration: underline;
}
#left ul a:link, #left ul a:visited {
padding: 5px;
margin: 5px;
color: #FFCCCC;
text-decoration: none;
font-family: "Segoe UI", "Arial Narrow", sans-serif;
font-size: 18px;
text-align: right;
vertical-align: middle;
display: block;
}
#left ul a:hover {
color: #FFFFFF;
text-decoration:underline;
}
#left li {
background-image: url(../images/list_white.png);
background-repeat: no-repeat;
background-position: right 15px;
line-height: normal;
padding-top: 0px;
padding-right: 17px;
padding-bottom: 0px;
}
#left li a:link, #left li a:hover {
color: #FFCCCC; !important
text-decoration: none;
}
#left li.active {
background-image: url(../images/list_black.png);
background-repeat: no-repeat;
background-position: right 15px;
line-height: normal;
padding-top: 0px;
padding-right: 17px;
padding-bottom: 0px;
}
Направьте меня пожалуйста в нужное русло... Спасибо.
P.S. Если у кого то есть в закладках ссылочки на хороший понятный материал как сделать выпадающее меню (или разворачивающееся... не знаю как правильно поэтому и гуглить уже замучался), чтобы при нажатии например на "дверные композиции" три пункта откатились и обратно свернулись при нажатии на другой пункт меню.
