Не работает выпадающее меню смены языка

@father_igni · Регистрация: 08.03.2015

Вопрос в том, что по такому-же принципу главное меню сайта работает как надо,а вот с языком, чтото не ладно

Если сделать так:

HTML5

        <section id="language">
              <ul id="drop_lang">
                  <li><a href=" "><img src="image/ru.png"> izig</a> </li>
                      <ul class="drop_lang">
                          <li><a href="index.php?lang=ru"><img src="image/ru.png"> Русский</a></li>
                          <li><a href="index.php?lang=en"><img src="image/en.png"> English</a></li>
                      </ul>
              </ul>
       </section>

CSS

#language {
    margin: 0;
    position: absolute;
    right: 30px;
}
#language li, #language ul {
    list-style: none;
    margin: 0;
}
#language a {
    text-decoration: none;
    font-size: 12px;
    font-family: 'Ubuntu', sans-serif;
    font-weight: bold;    
}
ul.drop_lang {
    visibility: hidden; 
    padding: 0;
}
ul#drop_lang li:hover > ul.drop_lang {
    visibility: visible;
}

то ничего не выпадает, но если крайний момент сделать так:

CSS

1
2
3

ul#drop_lang:hover > ul.drop_lang {
    visibility: visible;
}

то выпадалка работает, причем навести мышку можно не только на "заголовок" языка по умолчанию, но и на все выпадающее меню

опять-же повторюсь, по такому же принцыпу главное меню работает хорошо
(одна разница - в главном нет PHP ссылок, но думаю это не должно влиять на работу)

@prudkiy · 17.05.2015, 21:20

попробуйте так

CSS

1
2
3

ul#drop_lang > li:hover ul.drop_lang {
    visibility: visible;
}

@father_igni · 18.05.2015, 08:54 **[ТС]**

не, так точно работать не будет
(проверил на всяк случай - не работает)

@kisk · 18.05.2015, 09:11

Не надо перед классами ставить тэги, css и так понимает.
Маленько не тот селектор, надо написать вот так:

CSS

1
2
3

#drop_lang li:hover ~ .drop_lang {
    visibility: visible;
}

@father_igni · 18.05.2015, 09:16 **[ТС]**

"Ура! заработало!" (с)
а что это за значок:

CSS

до сего момента не попадался, да и выпадалки работали как писал выше с

CSS

@kisk · 18.05.2015, 09:19

Селектор связки, связываешь нужный тебе элемент с другим. Объяснил своими словами, советую почитать лучше про него

И на заметку про селекторы: http://www.codeharmony.ru/materials/42

@father_igni · 18.05.2015, 09:19 **[ТС]**

Хм... не совсем верно и заработало, наводишь на язык - выпадает менюшка...
двигаешь мышу вниз, чтоб выбрать язык... а выпадалка прячется
пичаль

спасибо за ссылку, просветимся

@kisk · 18.05.2015, 09:21

Дак правильно, а ты укажи, чтобы при наведении окно оставалось.

CSS

1	.drop_lang:hover { visibility: visible; }

@father_igni 1 / 1 / 1 Регистрация: 08.03.2015 Сообщений: 127
	18.05.2015, 08:54 [ТС]	3
	не, так точно работать не будет (проверил на всяк случай - не работает) 0

@kisk 6 / 6 / 4 Регистрация: 15.05.2015 Сообщений: 75 Записей в блоге: 3
	18.05.2015, 09:19	6
	Селектор связки, связываешь нужный тебе элемент с другим. Объяснил своими словами, советую почитать лучше про него И на заметку про селекторы: http://www.codeharmony.ru/materials/42 0

@father_igni 1 / 1 / 1 Регистрация: 08.03.2015 Сообщений: 127
	18.05.2015, 09:19 [ТС]	7
	Хм... не совсем верно и заработало, наводишь на язык - выпадает менюшка... двигаешь мышу вниз, чтоб выбрать язык... а выпадалка прячется пичаль спасибо за ссылку, просветимся 0

Опции темы