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

CSS горизонтальное меню

03.05.2014, 22:50. Просмотров 482. Ответов 8
Метки нет (Все метки)

Здравствуйте.
У меня проблема с горизонтальным меню.
Надо, чтобы подменю открывалось под пунктом меню. У меня оно открывается с большим сдвигом вправо.
Подскажите, пожалуйста, где что добавить?

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
<ul class="menu">
    
    <li><a href="">тттттт</a>
        <ul>
            <li><a href="">яяяяя</a></li>
            <li><a href="">ввввв</a></li>
            <li><a href="">еееее</a></li>
        </ul>
        </li>
    <li><a href="">ррррр</a></li>
    <li><a href="">ыыыыыы</a></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
50
51
52
53
54
55
56
57
58
59
60
61
62
ul.menu {
        margin: auto; 
        padding: 0; 
        height: 25px; 
        width: 100%;
        font-weight:bold;
        
}
ul.menu li {
          background-color:#c2bdc4;
          float: left;
          list-style: none;
          padding:5px 20px;
          margin:0 20px;    
}
 
ul.menu li a {
      color:#55342e;
      display: block;
      text-decoration: none;
}
 
ul.menu li a:hover {
        color:#55342e;
}
 
ul.menu li ul {
      display: none;
      margin:6px 0;
     
      
}
 
ul.menu li:hover ul {
  display: block;
  position: absolute;
}
 
ul.menu li:hover ul li {
  float: none;
}
 
ul.menu ul li  {
background-color:#c2bdc4;
 
}
 
ul.menu ul li:hover  {
background-color:#c2bdc4;
  
}
 
ul.menu ul li a {
  color:#55342e;
 
}
 
ul.menu ul li a:hover {
background-color:#c2bdc4;
color:#55342e;
 
}
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
03.05.2014, 22:50
Ответы с готовыми решениями:

Горизонтальное меню на CSS
Здравствуйте, Помогите пожалуйста подвинуть ul li ul li ul чтоб на ul li...

Горизонтальное CSS меню
Решил изучить создание горизонтального меню, но столкнулся с ОГРОМНЫМИ...

Горизонтальное меню (CSS)
Приветствую! Пытаюсь создать горизонтальное меню, однако столкнулся с...

Горизонтальное меню на CSS
Горизонтальное меню.При наведении на пункт меню выпадает подменю.Но сам пункт...

Горизонтальное меню css
Только начинаю делать сайты и возникла проблема, как сделать тень на...

8
ItViP18
1 / 1 / 2
Регистрация: 03.05.2014
Сообщений: 10
03.05.2014, 23:26 2
делайте позиционированием(т.е. внутренний ul -absolute, а li - relative). Не забудьте еще внутреннему ul задать padding 0, a у li убрать margin
CSS
1
2
3
4
5
6
7
8
9
ul.menu li{
  margin:0; 
  position: relative;
}
ul.menu li ul{
  position: absolute;
  left: 0;
  padding: 0;
}
0
Vladislav WebDev
324 / 214 / 97
Регистрация: 04.11.2012
Сообщений: 638
03.05.2014, 23:34 3
khrustal, отвечал на аналогичный вопрос недавно. Как сделать такое меню Гляньте, может вам поможет чем...
0
khrustal
2 / 2 / 0
Регистрация: 26.11.2013
Сообщений: 233
03.05.2014, 23:39  [ТС] 4
Цитата Сообщение от ItViP18 Посмотреть сообщение
делайте позиционированием(т.е. внутренний ul -absolute, а li - relative). Не забудьте еще внутреннему ul задать padding 0, a у li убрать margin
Позиционирование привело только к одному - маленькая ширина низподающего списка.
А margin в li мне нужен, чтобы пункты главного горизонтального меню были отдалены друг от друга.
0
ItViP18
1 / 1 / 2
Регистрация: 03.05.2014
Сообщений: 10
03.05.2014, 23:48 5
khrustal, мне, кажется спать пора) margin убирать не надо, просто вы задаете его для всех li, а надо ul.menu>li, чтобы только для дочерних li
0
khrustal
2 / 2 / 0
Регистрация: 26.11.2013
Сообщений: 233
04.05.2014, 00:00  [ТС] 6
ItViP18, Ставила я этот >.

Цитата Сообщение от ItViP18 Посмотреть сообщение
мне, кажется спать пора)
Здраво мыслите )
0
Дмитрий072
0 / 0 / 0
Регистрация: 04.05.2014
Сообщений: 2
04.05.2014, 02:59 7
Доброго времени суток. Подскажите как сделать меню как вот тут http://suenco.ru/aktsioneram-i-inves...y-obshchestva/
0
Dzvene
11 / 11 / 5
Регистрация: 27.09.2013
Сообщений: 278
04.05.2014, 04:20 8
Цитата Сообщение от Дмитрий072 Посмотреть сообщение
сделать меню как вот тут
Вы это имеете ввиду?

HTML5
1
2
3
4
5
6
7
8
9
10
11
<div class="menu">
  <ul class="">
    <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>
</div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.menu ul {
  overflow: hidden;
  list-style-type: none;
}
.menu li {
  margin: 0 0 8px 0;
}
.menu li a {
  color: #000000;
  text-decoration: none;
}
.menu li a:hover {
  color: #000000;
  text-decoration: underline;
}
http://codepen.io/anon/pen/pAgBh




Цитата Сообщение от khrustal Посмотреть сообщение
проблема с горизонтальным меню
Поковыряйтесь тут:

http://codepen.io/anon/pen/qiKpf
0
Дмитрий072
0 / 0 / 0
Регистрация: 04.05.2014
Сообщений: 2
04.05.2014, 20:03 9
Мне надо что бы было в горизонтальном меню нажимаешь на вкладку "о нас с лева с боку появлялось вертикальное меню с вкладками" и так дальше по вкладкам
типа такого:
О нас О компании
1
2
3
4
О нас О компании
а
б
в
г
0
04.05.2014, 20:03
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
04.05.2014, 20:03

Горизонтальное меню CSS
вот у меня HTML код меню &lt;ul id=&quot;menu&quot;&gt; &lt;link href=&quot;style.css&quot;...

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

Горизонтальное меню CSS + HTML5
Столкнулся с такой проблемой. Создал меню, необходимо при наведении на...


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

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

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