Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
1 / 1 / 0
Регистрация: 13.09.2014
Сообщений: 31
1

Выпадающее меню

15.12.2015, 22:33. Просмотров 310. Ответов 5
Метки нет (Все метки)

Есть такое меню!
Но мне нужно немного не так, нужно что бы выпадающий список был по горизонтали, то есть три этих подменю располагались не вниз друз за другом, а в бок.
Выпадающее меню

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<ul id="menu">
    <li><a href="#">Пункт 1</a></li>
    <li>
        <a href="#">Пункт 2</a>
        <ul>
            <li><a href="#">Подпункт 2.1</a></li>
            <li><a href="#">Подпункт 2.2</a></li>
            <li><a href="#">Подпункт 2.3</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Пункт 3</a>
        <ul>
            <li><a href="#">Подпункт 3.1</a></li>
            <li><a href="#">Подпункт 3.2</a></li>
            <li><a href="#">Подпункт 3.3</a></li>
            <li><a href="#">Подпункт 3.4</a></li>
            <li><a href="#">Подпункт 3.5</a></li>
        </ul>
    </li>
</ul>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
#menu {
    padding: 0;
    margin: 0;
    font-size: 100%;
    font-family: Georgia;
    }
#menu li {
    list-style: none;
    float: left;
    height: 33px;
    padding: 0;
    margin: 0;
    width: 150px;
    text-align: center;
    background: #171717;
    position: relative;
    padding-top: 12px;
    }
#menu li ul {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 150px;
    display: none;
    position: absolute;
    left: 0;
    top: 45px;
    }
#menu li ul li {
    float: none;
    height: 33px;
    margin: 0;
    width: 150px;
    text-align: center;
    background: #7F7F7F;
    }
#menu li a {
    display: block;
    width: 150px;
    height: 33px;
    color: #fff;
    text-decoration: none;
    }
#menu li:hover ul, #menu li:hover ul {
    display: block;
    }
#menu li:hover, #menu li:hover {
    background: #424242;
    }
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
15.12.2015, 22:33
Ответы с готовыми решениями:

Выпадающее меню - разный размер шрифта для разных уровней меню
Есть у меня данный список, но возник вопрос: &quot;как сделать чтобы в надписи буквы1 был шрифт 19px, а...

Выпадающее меню. Не фиксируется бордер раздела меню, при использовании подменю
Делаю выпадающее меню, почти все сделал, осталось по сути немного, и не могу закончить. Вот код:...

Выпадающее меню
Всем привет. Я в этом деле новичок.....подскажите пожалуйста, как создать на странице выпадающее...

Выпадающее меню
В шаблоне выпадающее меню находится под основным блоком, на z-index никак не реагирует, есть мысли...

5
152 / 151 / 67
Регистрация: 25.02.2015
Сообщений: 492
15.12.2015, 22:55 2
в 30 строке поставьте float:left, в 33 уберите фискированную ширину. И допишите overflow:hidden; в этот блок кода
0
1 / 1 / 0
Регистрация: 13.09.2014
Сообщений: 31
15.12.2015, 23:15  [ТС] 3
Убрал и дописал и не работает

Добавлено через 5 минут
вообще ничего не поменялось

Добавлено через 8 минут
Karssen, ау парень
0
31 / 24 / 5
Регистрация: 15.11.2015
Сообщений: 140
15.12.2015, 23:51 4
Warrantty, дай фиксированую ширину #menu li ul больше и li float left
0
1 / 1 / 0
Регистрация: 13.09.2014
Сообщений: 31
15.12.2015, 23:55  [ТС] 5
сделал результата нет, прошу напиши что бы работало и скинь код, я уже который час сижу и не получается
0
31 / 24 / 5
Регистрация: 15.11.2015
Сообщений: 140
16.12.2015, 00:35 6
Warrantty,
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
#menu {
    padding: 0;
    margin: 0;
    font-size: 100%;
    font-family: Georgia;
    }
#menu li {
    list-style: none;
    float: left;
    height: 33px;
    padding: 0;
    margin: 0;
    width: 150px;
    text-align: center;
    background: #171717;
    position: relative;
    padding-top: 12px;
    }
#menu li ul {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 550px;
    display: none;
    position: absolute;
    left: 0;
    top: 45px;
    }
#menu li ul li {
   float: left;
    height: 33px;
    margin: 0;
    width: 150px;
    text-align: center;
    background: #7F7F7F;
    }
#menu li a {
    display: block;
    width: 150px;
    height: 33px;
    color: #fff;
    text-decoration: none;
}
#menu li:hover ul, #menu li:hover ul {
    display: block;
    }
#menu li:hover, #menu li:hover {
    background: #424242;
    }
1
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
16.12.2015, 00:35

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

Выпадающее меню
Добрый день. Возникло задание в html сделать выпадающее меню с условием, что после перехода на...

Выпадающее меню
Здравствуйте, подскажите пожалуйста как сделать самое простое выпадающее меню. Мне нужно чтобы был...

Выпадающее меню
Приветствую, господа! Имеется статичное меню такого вида: http://pixelpie.ru/public/menu.png Вот...

Выпадающее меню
Вообщем так, все никак не могу заставить выпадать менюшку...мб поможете..)) &lt;ul class=&quot;top-nav&quot;&gt;...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
6
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2020, vBulletin Solutions, Inc.