Joomla 1.5 Ширина подпункта и вопрос об активном пункте

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

  1. Offline

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

    Регистрация:
    19.08.2009
    Сообщения:
    2
    Симпатии:
    0
    Пол:
    Мужской
    Добрая ночь, Уважаемые коллеги!
    Вот уже второй час ночи, а я уставший и расстроенный кидаю клич о помощи =)

    Дело вот в чем. Пишу свой шаблон под J!1.5 после достаточно долгого перерыва.
    - Вопрос1: CSS никак не хочет позволить моему пункту submenu быть шире, чем ширина родительского пункта. Если приписать строчку вида height:180px, то текст смещается и рассчитывает  на широкое поле (уходит за рамки)
    [​IMG]

    -Вопрос2: Никак не могу подружить возможность подсветки активного пункта меню (в моем случае - png бэкграунд)

    Меню сделано по принципу ul (список). Так-же прошу подсказать, как должен выглядеть класс (или нужен идентификатор) в CSS для привязки его в суффиксе модуля (в модуле главного меню).
    Код (CODE):
    1.     ul,li{
    2.        padding:0;
    3.        margin:0;
    4.  
    5.      }
    6.      ul.menu{
    7.          width:auto;
    8.          background-color:#0F0 ;
    9.  
    10.      }
    11.      ul.menu li a{
    12.     height:37px;
    13.     display: block;
    14.     font-family: Verdana, Geneva, sans-serif;
    15.     font-size: 15px;
    16.     text-decoration: none;
    17.     color:#333;
    18.     padding-top: 15px;
    19.      }
    20.      ul.menu li a:hover{
    21.     background-color: #FFF;
    22.     background:url(../images/button.png);
    23.      }
    24.      ul.menu li{
    25.        float:left;
    26.        list-style: none;
    27.        text-align: center;
    28.        width: 120px;
    29.  
    30.      }
    31. /* первый уровень вложенности */
    32. ul.menu li ul {
    33. background-color:#cbe1ec;
    34. opacity:0.85;
    35. font-size:10px;
    36. width: auto;
    37. }
    38. ul.menu li:hover ul {
    39. display:block;
    40. color:#F90;
    41. }
    42. /* Внешний вид выпавшего меню */
    43. ul.menu li:hover ul li a{
    44.     width:auto;
    45.     text-align:left;
    46.     height: auto;
    47.     padding: 0 10px;
    48.     background-color:#cbe1ec;
    49.     font-family:Grotic;
    50.     font-style:bold;
    51.     font-size: 12px;
    52.     text-transform: uppercase;
    53.     text-decoration:none;
    54.     padding-top:5px;
    55.     border-bottom-width: 1px;
    56.     border-bottom-style: solid;
    57.     border-bottom-color: #006;
    58. }
    59.  
    60. ul.menu li.active a, ul.menu li a:hover {
    61.     color:#E8A03D;
    62. }
    63. a#active_menu {
    64. color: #000000;
    65. text-decoration: none;
    66. }
    67. /* второй уровень вложенности */
    68.              li.parent ul li ul{
    69.                  background-image:none;
    70.                position: absolute;
    71.                float:left;
    72.                display:list-item;
    73.                    font-size:10px;
    74.                 width:180px;
    75.                 font-size:10px;
    76.                 background:#93C;}
    77.                
    78.             li.parent:hover ul li ul{
    79.                 background-image:none;
    80.                position: absolute;
    81.                float:left;
    82.                display:list-item;
    83.                    font-size:10px;
    84.                 width:180px;
    85.                 font-size:10px;
    86.                 background:#93C;}
    87.               
    88. /* костыль для ie7 */
    89.                *margin-left:0;
    90.                *margin-top:0;
    91.              li.parent:hover ul li ul{
    92.                display: none;
    93.                background-color:#0C6;
    94.              }
    95.  
    96.              li.parent:hover ul li:hover ul{
    97.                display: block;
    98.              }
    99.  
    100.      ul.menu li ul li{
    101.     display:block;
    102.     float:none;
    103.     clear:both;
    104.     background-image:none;
    105.  
    106.      }
    107.      ul.menu li ul li a{
    108.        display: block;
    109.        background-image:none;
    110.      }.table {
    111.     height: 5px;
    112. }

    ps: в приведенном выше коде есть достаточно много ненужных пунктов - следствие проб для получения результата.
    Друзья, помогите пожалуйста :'(
     
  2.  

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

Загрузка...