Как сделать удобный вывод пунктов подменю ul li ul?

Question

[Chvalov]

Хочу сделать меню чтобы было примерно такое:

Код сейчас такой:

<li>
          <a href="#">Фильмы</a>
            <ul>
            	<li><a href="#">Аниме</a></li>
            	<li><a href="#">Биографические</a></li>
            	<li><a href="#">Боевики</a></li>
            	<li><a href="#">Вестерны</a></li>
            	<li><a href="#">Военные</a></li>
            	<li><a href="#">Детективы</a></li>
            	<li><a href="#">Детские</a></li>
            </ul>
            <ul>
           		<li><a href="#">Документальные</a></li>
            	<li><a href="#">Драмы</a></li>
            	<li><a href="#">Исторические</a></li>
            	<li><a href="#">Комедии</a></li>
            	<li><a href="#">Короткометражки</a></li>
            	<li><a href="#">Криминальные</a></li>
            	<li><a href="#">Мелодрамы</a></li>
            </ul>
            <ul>
            	<li><a href="#">Мюзиклы</a></li>
            	<li><a href="#">Приключения</a></li>
            	<li><a href="#">Семейные</a></li>
            	<li><a href="#">Спортивные</a></li>
            	<li><a href="#">Триллеры</a></li>
            	<li><a href="#">Фантастика</a></li>
            	<li><a href="#">Фэнтези</a></li>
        	</ul>
        </li>

Шаблон вот здесь - test. kino-budka .net

Answer 1

[Александр Пупкин]

Зачем столько ul ?

<li>
<a href="#">Фильмы</a>
<ul>
    <li><a href="#">Аниме</a></li>
    <li><a href="#">Биографические</a></li>
    <li><a href="#">Боевики</a></li>
    <li><a href="#">Вестерны</a></li>
    <li><a href="#">Военные</a></li>
    <li><a href="#">Детективы</a></li>
    <li><a href="#">Детские</a></li>
    <li><a href="#">Документальные</a></li>
    <li><a href="#">Драмы</a></li>
    <li><a href="#">Исторические</a></li>
    <li><a href="#">Комедии</a></li>
    <li><a href="#">Короткометражки</a></li>
    <li><a href="#">Криминальные</a></li>
    <li><a href="#">Мелодрамы</a></li>
    <li><a href="#">Мюзиклы</a></li>
    <li><a href="#">Приключения</a></li>
    <li><a href="#">Семейные</a></li>
    <li><a href="#">Спортивные</a></li>
    <li><a href="#">Триллеры</a></li>
    <li><a href="#">Фантастика</a></li>
    <li><a href="#">Фэнтези</a></li>
</ul>
</li>

С начало так, дальше надо смотреть....

Comments

[Chvalov]

Александр Пупкин Так уже было, оно все в одну строку выводит и слишком длинное получается
что не удобно для пользователя :(

[Александр Пупкин]

ну дальше там li display:inline-block; width: , height: , min-width и т.п. надо пилить

[Chvalov]

Александр Пупкин: Что то не получается, сделал вывод все в один столбик
можете попробовать набросать стиль для разбития на 3 колонки по 7 пунктов
Заранее благодарен

[Александр Пупкин]

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

#navigation li:hover > ul {
    opacity: 1;
    visibility: visible;
    width: 400px;
}
    
 #navigation ul li ul li {
      float:left;
}

я думаю дальше осилите?

[Chvalov]

Александр Пупкин: Да большое спасибо
правда для 3 колонок нужно было 600px, а не 400 :)

#navigation li:hover > ul {opacity:1;visibility: visible;  width: 600px;}

Большое спасибо, иду буду приводить это все к нормальному виду

[Александр Пупкин]

как обстоят дела с авторскими правами?

[Chvalov]

Александр Пупкин: Нормально :)
Но появилась другая проблема:
Если отвести курсов в право от меню то все начинает мерцать
такое чувство что менюшка продолжается

[Роман Макаров]

Chvalov: можно ссылку?

[Chvalov]

Роман Макаров: test.kino-budka.net

[Роман Макаров]

Chvalov: i.imgur.com/Gc6LFwh.png

[Chvalov]

Роман Макаров: Неможет такого быть
у меня все норм в FF, Opera, IE

[Александр Пупкин]

у #navigation ul ul сделать display:none; и убрать visibility: hidden.

а у #navigation li:hover > ul сделать display:block; и убрать visibility: visible

[Chvalov]

Александр Пупкин: Спасибо большое, работает.

А можете подсказать как сделать чтобы увеличения картинки было не только при наведении на саму картинку, а когда курсор находится в div
А то при наведении курсора на иконку воспроизведения картинка (постер) возвращается на исходное положение

[Александр Пупкин]

дядь, ну ты чего, весь сайт сделал через toster? =) попробуй по играть с .play, типо задать transition и transform....думаю на вскидку transition-delay у play сделать с отрицанием -4s. Что то типо наводишь на картинку, она увеличивается, только наводишь на .play у него уже из-за -4s ( или другое кол-во время, надо тестить ) анимация в конце, т.е. картинка уже увеличена.

Надеюсь понял. Голова не варит. Давление, пенсия, туда сюда.

И вообще, мой тебе совет - На хрен ни надо ни кому это увеличение картинки (посетителям сайта), главное полезный и адекватный контент, а такие мелочи ни кто не оценить, да и все равно им. Только время тратишь на это.

Сайт, контент, нормальный божеский вид, удобство. Остальное мелочи.

[Chvalov]

Александр Пупкин: ^) Thx

[Александр Пупкин]

с тебя золотой доступ на сайт. Там всякие крутые привилегии, пиво, орешки =)

[Александр Пупкин]

черкани в скайп, получилось или нет.

[Chvalov]

Александр Пупкин: Не совсем понял о чем ты :)

с тебя золотой доступ на сайт. Там всякие крутые привилегии, пиво, орешки =)

Да вроде все получилось

черкани в скайп, получилось или нет.

Answer 2

[Роман Макаров]

сделайте таблицей, либо используйте float

Comments

[Chvalov]

Роман Макаров Можно подробнее про float ?

[Роман Макаров]

(3 блока float:left/right(особо без разницы), потом clearfix) повторить сколько требуется.
li с float будут выстраиваться в строку, а не столбиком.

[Chvalov]

Роман Макаров: Можете помочь исправить данную проблему:
Как сделать удобный вывод пунктов подменю ul li ul?