Форум программистов, компьютерный форум CyberForum.ru
CyberForum.ru - форум программистов и сисадминов > >
Восстановить пароль Регистрация
 
Sunman
Форумчанин
55 / 55 / 1
Регистрация: 02.03.2010
Сообщений: 391
19.07.2013, 12:10     Почему не растягивается ul на высоту вложенных элементов
  #1
Добрый день. Подскажите где косяк: http://jsfiddle.net/nFJ98/5/
Код HTML5
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
<div id="top_menu">
        <ul>
            <li id="top_el1"><a href="#">1</a>
                <ul>
                    <li><a href="#">1</a></li>
                </ul>
            </li>
            <li id="top_el2"><a href="#">1</a>
                <ul>
                    <li><a href="#">1</a></li>
                    <li><a href="#">1</a></li>
                    <li><a href="#">1</a></li>
                    <li><a href="#">1</a></li>
                    <li><a href="#">1</a></li>
                    <li><a href="#">1</a></li>
                </ul> 
            
            </li>
            <li id="top_el3"><a href="#">1</a>
                 
            </li>
            <li id="top_el4"><a href="#">1</a>
                <ul>
                    <li><a href="#">1</a></li>
                    <li><a href="#">1</a></li>
                    <li><a href="#">1</a></li>
                    <li><a href="#">1</a></li>
                    <li><a href="#">1</a></li>
                </ul>            
            </li>
        </ul>
    </div>
Код 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
#top_menu ul{
    margin:0;
    padding:0;
    list-style:none;
    text-transform:uppercase;
    font:14px Verdana, Geneva, sans-serif bold ;z-index:10;
}
 
#top_menu ul li {
    float:left;
    display:block;
    width:170px;
    margin:18px -133px 0 149px;
    text-align:center;
}
#top_menu ul li a {
    display:block;
    width:170px;
    padding-top:1px;
    height:24px;
}
 
#top_menu #top_el3{margin:18px -132px 0 211px;}
 
#top_menu ul li a:hover {
    box-shadow: 0 0 5px 6px #F6D82A;
   -moz-box-shadow: 0 0 5px 6px #F6D82A;
   -webkit-box-shadow: 0 0 5px 6px #F6D82A;
    border-radius: 3px;  /* свойство для тех кто его поддерживает */
   -moz-border-radius: 3px;  /* для firefox */
   -webkit-border-radius: 3px;  /* для Safari и Chrome */
}
 
#top_menu ul li ul li a{
    width:170px;
    color:black;
}
#top_menu ul li ul li {margin:0; height:30px;}
#top_menu ul li ul{
    background-color:#FF0;
    border:2px solid black; 
    width:165px;
}
#top_menu ul li ul не реагирует на высоту вложенных элементов li и остается "полосочкой бордера черного цвета" поджатой под родительский li. Если задать ему высоту то он вытягивается вниз как и должно быть, но почему он не реагирует на высоту вложенных?

 Комментарий модератора Taatshi
Правила форума пункт 5.19

Запрещено размещать ссылки на коды программ, расположенные на других сайтах. Коды программ должны размещаться на форуме.
AdAgent
Объявления
19.07.2013, 12:10
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
19.07.2013, 12:10

Посмотрите здесь:

HTML, CSS растягивается

HTML, CSS Почему сайт растягивается?

HTML, CSS Таблица растягивается в высоту

HTML, CSS Блок не растягивается на всю высоту экрана

HTML, CSS Странное положение вложенных элементов

HTML, CSS С !doctype высота header не растягивается попроцентно, а без него растягивается

HTML, CSS Центральный блок должен растягиваться на всю высоту экрана, а не на высоту контента

HTML, CSS Почему ширина растягивается в одну сторону

HTML, CSS Не растягивается во всю высоту

HTML, CSS Не растягивается

Forastero
Форумчанин
494 / 276 / 17
Регистрация: 15.05.2013
Сообщений: 647
Записей в блоге: 1
19.07.2013, 12:42
  #2
Здравствуйте. Внесите небольшие поправки. Добавьте свойство:
Код CSS
1
2
3
#top_menu ul li ul {
    overflow: hidden;
}
Sunman
Форумчанин
55 / 55 / 1
Регистрация: 02.03.2010
Сообщений: 391
19.07.2013, 13:04  [ТС]
  #3
Помогло,благодарю, но это убило мою логику))
overflow: hidden; - вроде должно скрывать, а тут наоборот появляется, как так?
Forastero
Форумчанин
494 / 276 / 17
Регистрация: 15.05.2013
Сообщений: 647
Записей в блоге: 1
19.07.2013, 13:21     Почему не растягивается ul на высоту вложенных элементов
  #4
Sunman, если высота элемента не задана, а в данном случае не задана, то элемент оборачивает дочерние элементы.
Yandex
Объявления
19.07.2013, 13:21
После регистрации реклама в сообщениях будет скрыта и будут доступны все возможности форума.
Ответ Создать новую тему
Опции темы

Текущее время: 10:18. Часовой пояс GMT +4.
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.7 PL3
Copyright ©2000 - 2014, vBulletin Solutions, Inc.