Как в CSS изменить стиль не активного пункта меню

Тема в разделе "Вопросы по работе с меню", создана пользователем kayross, 05.04.2009.

  1. Offline

    kayross Недавно здесь

    Регистрация:
    01.03.2009
    Сообщения:
    5
    Симпатии:
    0
    Добрый день. Делаю свой первый сайт и есть проблемка у меня в
    css, а именно есть горизонтальное меню с родительскими элементами (приложил скрины) и мне нужно
    чтобы активные пункты были другого цвета. Например, активный пунт и родительский элемент (подпункт) одного цвета - зеленого, а другие родительские пункты - серого. Посдскажите пожалуйста, где и как? спасибо.

    Код (CODE):
    1. #mainMenu {
    2.     float: left;
    3.     width:700px;
    4.     height: 28px;
    5.     margin-top: 0;
    6.     margin-right: 0;
    7.     margin-left: 1px;
    8. }
    9.  
    10.    
    11. .menu {
    12.         padding:0;
    13.         color: #666;
    14.         height: 28px;
    15.         margin: 0;
    16.         font-size: 10px;
    17.         text-transform: uppercase;
    18. }
    19.  
    20. .menu ul{
    21.         list-style: none;
    22.         margin: 0;
    23.         padding: 0;
    24.         margin-left: -11px;      
    25. }
    26.  
    27. .menu li{
    28.         list-style: none;
    29.         float: left;
    30.         color: #666;
    31.         font-weight: normal;
    32.     font-size: 11px;
    33.     padding-right: 15px;
    34.     line-height: 26px;
    35.     text-transform: uppercase;
    36.     font-family: Arial, Helvetica, sans-serif;
    37. }
    38.  
    39. .menu li ul {
    40.         position: absolute;
    41.         width: 170px;
    42.         left: -999em;
    43.         background-color: #fff;
    44.         line-height: 26px;
    45.         z-index: 500;
    46.         margin-left: -10px;
    47.         border: solid 1px #ccc;
    48.         margin-top: -1px
    49. style=
    50. "filter:alpha(opacity=80); /* IE 5.5+*/
    51. -moz-opacity: 0.8; /* Mozilla 1.6 и ниже */
    52. -khtml-opacity: 0.8; /* Konqueror 3.1, Safari 1.1 */
    53. opacity: 0.8; /* CSS3 - Mozilla 1.7b +, Firefox 0.9 +, Safari 1.2+, Opera 9 */ "
    54. }
    55.  
    56. .menu li:hover ul {
    57.         left: auto;
    58. }
    59.  
    60. .menu li ul li {
    61.         width: 180px;
    62.         padding: 0;
    63. }
    64.  
    65. .menu a {
    66.         display: block;
    67.         padding: 0;
    68.         font-weight: normal;
    69.         text-decoration: none;
    70.         color: #666;
    71. }
    72.  
    73. .menu a:hover {
    74.     color: #b0cf36;
    75.     font-weight: bold;
    76.     text-decoration: none;
    77. }
    78.  
    79. html>body .menu li a {
    80.         width: auto;
    81. }
    82.  
    83. .menu li ul li a {
    84.       padding-left: 20px;
    85.  
    86.      
    87. color: #666;    
    88. }
    89.  
    90. .menu li.active,
    91. .menu li:hover,#active_menu:link,a#active_menu:visited{
    92.         text-decoration: none; font-weight: bold;
    93.         color: #b0cf36;
    94. }
    95.  
    96. .menu li ul li:hover {
    97.    
    98. }
    99.  
    100. .menu li:hover ul, .menu li.sfhover ul {
    101.         left: auto;
    102. }
    103.  
    104. .menu li.active a,
    105. .menu ul li.active a {
    106.         text-decoration: none;
    107.         color: #b0cf36; font-weight: normal;
    108.  
    109. }
    110.  
    111. .menu li.active a,
    112. .menu li:hover a {
    113. font-weight: bold;
    114. }
    115.  
    116. .menu li ul ul {
    117.     margin: -27px 0 0 120px;
    118. }
    119.  
    120. .menu li:hover ul ul, .menu  li.sfhover ul ul {
    121.     left: -999em;
    122. }
    123.  
    124. .menu  li:hover ul, .menu li li:hover ul, .menu li.sfhover ul, .menu  li li.sfhover ul {
    125.     left: auto;
    126. }
    127.  
    128. .menu li:hover ul ul, .menu li:hover ul ul ul, .menu li.sfhover ul ul, .menu li.sfhover ul ul ul {
    129.     left: -999em;
    130. }
    131.  
    132. .menu li:hover ul, .menu li li:hover ul, .menu li li li:hover ul, .menu li.sfhover ul, .menu li li.sfhover ul, .menu li li li.sfhover ul {
    133.     left: auto;
    134. }
    135.  
    136. .menu li:hover ul ul, .menu li:hover ul ul ul, .menu li:hover ul ul ul ul, .menu li.sfhover ul ul, .menu li.sfhover ul ul ul, .menu li.sfhover ul ul ul ul {
    137.     left: -999em;
    138. }
    139.  
    140. .menu li:hover ul, .menu li li:hover ul, .menu li li li:hover ul, .menu li li li li:hover ul, .menu li.sfhover ul, .menu li li.sfhover ul, .menu li li li.sfhover ul, .menu li li li li.sfhover ul {
    141.     left: auto;
    142. }
     

    Вложения:

    • 1p.JPG
      1p.JPG
      Размер файла:
      35.4 КБ
      Просмотров:
      9
    • 2p.JPG
      2p.JPG
      Размер файла:
      37.2 КБ
      Просмотров:
      5
  2.  
  3. Offline

    kayross Недавно здесь

    Регистрация:
    01.03.2009
    Сообщения:
    5
    Симпатии:
    0
    подскажите пожалуйста -)
     
  4. Offline

    kayross Недавно здесь

    Регистрация:
    01.03.2009
    Сообщения:
    5
    Симпатии:
    0
    профи, подскажите пожалуйста!!!
     
  5. Offline

    kayross Недавно здесь

    Регистрация:
    01.03.2009
    Сообщения:
    5
    Симпатии:
    0
    еще раз прошу вашей помощи
     
  6. Offline

    quake3arena Недавно здесь

    Регистрация:
    03.12.2008
    Сообщения:
    107
    Симпатии:
    0
    Пол:
    Мужской
    http://htmlbook.ru/css/visited
     
  7. Vamp
    Offline

    Vamp Модератор

    Регистрация:
    30.06.2010
    Сообщения:
    282
    Симпатии:
    44
    Пол:
    Мужской
    link - стиль для не посещенных ссылок
    hover - оформление при наведении курсора мыши на ссылку (без нажатия мыши)
    active - стиль активной ссылки (при нажатии мыши)
    visited - оформление для посещенных ссылок
     

Поделиться этой страницей

Загрузка...