Форум программистов, компьютерный форум CyberForum.ru
CyberForum.ru - форум программистов и сисадминов > >
Восстановить пароль Регистрация
 
Sunman
56 / 56 / 3
Регистрация: 02.03.2010
Сообщений: 405
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. Если задать ему высоту то он вытягивается вниз как и должно быть, но почему он не реагирует на высоту вложенных?

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

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

HTML, CSS Почему сайт растягивается?
HTML, CSS Таблица растягивается в высоту
HTML, CSS Блок не растягивается на всю высоту экрана
Странное положение вложенных элементов HTML, CSS
С !doctype высота header не растягивается попроцентно, а без него растягивается HTML, CSS
HTML, CSS Почему ширина растягивается в одну сторону
HTML, CSS Не растягивается во всю высоту
Блок не растягивается на оставшуюся высоту родительского блока HTML, CSS

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

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

Текущее время: 15:13. Часовой пояс GMT +3.
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2016, vBulletin Solutions, Inc.
Рейтинг@Mail.ru