вопрос с работой модуля mod_mg_menu для горизонтального меню

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

  1. Offline

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

    Регистрация:
    05.07.2010
    Сообщения:
    2
    Симпатии:
    0
    Пол:
    Мужской
    Здравствуйте

    Помогите решить вопрос с менюшкой. У меня горизонтальное меню и суб меню и когда при нажатии на одно из пунктов меню суб менюшка остается на экране (логично)) ! ) но вот когда перемешаешь мышку на другой пункт меню то происходит наложение в позиции суб меню. Нажатого и наведенного меню.

    Как можно сделать так чтобы при наведении любого пункта меню старое исчезало (((

    [​IMG]
    Верхнее что получается
    А нижнее как должно быть!
    Вот код этого модуля.. что в нем не так ???
    Код (CODE):
    1. #divNav {
    2.         background: transparent url(bk-nav.jpg) no-repeat top left;
    3.         margin: 0;
    4.         padding: 0;
    5.         height: 80px;
    6.         width: 800px;
    7.     }
    8.  
    9.     #nav {
    10.         position: relative;
    11.         top: 3px;
    12.         height: 80px;
    13.         width: 780px;
    14.     }
    15.  
    16.     #nav li ul, #nav li ul {
    17.         margin: 0;
    18.         padding: 0;
    19.     }
    20.  
    21.     #nav a {
    22.         text-decoration: none;
    23.         height: 25px;
    24.     }
    25.  
    26.     #nav li { /*float the main list items*/
    27.         margin: 0;
    28.         float: left;
    29.         display: block;
    30.         padding: 0 5px 0 0;
    31.     }
    32.  
    33.     #nav li ul {
    34.         display: none;
    35.     }
    36.  
    37.     #nav li ul li a {
    38.         height: 20px;
    39.     }
    40.  
    41.     #nav li.off ul, #nav li.on ul  { /*put the subnav below*/
    42.         position: absolute;
    43.         top: 22px;
    44.         left: 0;
    45.         padding-top: 0px;
    46.         background: transparent;
    47.         height: 20px;
    48.         width: 780px;
    49.         padding-left: 5px;
    50.          
    51.     }
    52.  
    53.     #nav li.on ul {
    54.         background: transparent;
    55.     }
    56.  
    57.     #nav li.on ul li.on a {
    58.         color: #0033CC;
    59.     }
    60.  
    61.     #nav li.on:hover ul, #nav li.over ul { /*for ie*/
    62.         background: transparent;
    63.     }
    64.  
    65.     #nav li a {
    66.         color: #000000;
    67.         font-weight: bold;
    68.         font-size: 16px;
    69.         line-height: 25px;
    70.         display: block;
    71.         padding: 0;
    72.     }
    73.  
    74.     #nav li a:hover {
    75.         color: #000000;
    76.         font-weight: bold;
    77.         font-size: 16px;
    78.         line-height: 25px;
    79.         display: block;
    80.         padding: 0;
    81.     }
    82.  
    83.     #nav li.on a {
    84.         color: #e501a7;
    85.     }
    86.  
    87.  
    88.     #nav li.on ul a, #nav li.off ul a {
    89.         border: 0;
    90.         float: left; /*ie doesn't inherit the float*/
    91.         color: #0033CC;
    92.         width: auto;
    93.         margin-right: 0px;
    94.     }
    95.  
    96.     #nav li.on:hover ul a, #nav li.over ul li a { /*for ie - the specificity is necessary*/
    97.         background: transparent;
    98.     }
    99.  
    100.     #nav li.on ul {
    101.         display: block;
    102.     }
    103.  
    104.     #nav li.off:hover ul, #nav li.over ul {
    105.         display: block;
    106.         z-index: 6000;
    107.     }
    108.  
    109.     #nav li.off a:hover, #nav li.on a:hover {
    110.         color: #e501a7;
    111.     }
    112.  
    113.     #nav li.off ul li.off a:hover, #nav li.on ul li.off a:hover {
    114.         color: #000000;
    115.     }
    116.  
    117.     /*do the image replacement*/
    118.  
    119.     #nav li span {
    120.         position: absolute;
    121.         left: -9384px;
    122.     }
    123.  
    124.     #liRenaissance a, #liArtNouveau a, #liModern a, #liPostModern a, #liDigital a {
    125.         display: block;
    126.         position: relative;
    127.         height: 26px;
    128.         background: url(bk-dropdownMap.gif) no-repeat; /*contains all hover states*/
    129.     }
    130.  
    131. /*first, put the initial states in place*/
    132.  
    133. #liRenaissance a {
    134.     background-position: 0 0;
    135. }
    136.  
    137. #liArtNouveau a {
    138.     background-position: -102px 0;
    139. }
    140.  
    141. #liModern a {
    142.     background-position: -204px 0;
    143. }
    144.  
    145. #liPostModern a {
    146.     background-position: -306px 0;
    147. }
    148.  
    149. #liDigital a {
    150.     background-position: -408px 0;
    151. }
    152.  
    153. /*active area - for this demo - the code could be based on a body class, and probably work better.*/
    154.  
    155.  #liModern.on a {
    156.     background-position: -204px -37px;
    157.  } /*add selectors for the other li's and background-positions*/
    158.  
    159. /*hover states*/
    160.  
    161. #liRenaissance a:hover, #liRenaissance:hover a, #liRenaissance.over a {
    162.     background-position: 0 -73px;
    163. }
    164.  
    165. #liArtNouveau a:hover, #liArtNouveau:hover a, #liArtNouveau.over a {
    166.     background-position: -102px -73px;
    167. }
    168.  
    169. #liModern a:hover, #liModern:hover a, #liModern.over a {
    170.     background-position: -204px -73px;
    171. }
    172.  
    173. #liPostModern a:hover, #liPostModern:hover a, #liPostModern.over a {
    174.     background-position: -306px -73px;
    175. }
    176.  
    177. #liDigital a:hover, #liDigital:hover a, #liDigital.over a {
    178.     background-position: -408px -73px;
    179. }
    180.  
    181. /*subnav formatting*/
    182.  
    183. #nav li.off ul a, #nav li.on ul a {
    184.     display: block;
    185.     background: transparent;
    186.     color: #e501a7;
    187.     font-family: arial, verdana, sans-serif;
    188.     font-size: 12px;
    189.     font-weight: normal;
    190.     line-height: 20px;
    191.     padding-top: 10px;
    192. }      
    193.  
    194. #nav li.on ul a {
    195.     background: transparent;
    196. }




    Помогите плиззз
     
    Последнее редактирование: 24.08.2010
  2.  

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

Загрузка...