Форум программистов, компьютерный форум CyberForum.ru Форум программистов | Компьютерный форум | Форум web-программистов | Форум по электронике и бытовой технике | Форум о софте | Научный форум | Карьера и бизнес
CyberForum.ru - форум программистов и сисадминов > >
Восстановить пароль Регистрация

Ответ Создать новую тему
 
Sunman
Форумчанин
53 / 53 / 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
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
Форумчанин
53 / 53 / 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
После регистрации реклама в сообщениях будет скрыта и будут доступны все возможности форума.
Ответ Создать новую тему

Похожие темы
Тема Раздел Автор Дата
HTML, CSS Не растягивается во всю высоту
Подскажите, пожалуйста, как заставить div класса main растягиваться по содержимому. сейчас он на какуе-то высоту растягивается, а дальше прерывается. на картинке показал, где прерывается. И страничка...
HTML, CSS Johnlion 27.03.2014 00:05
HTML, CSS Почему ширина растягивается в одну сторону
При hover на каком-то из трех элементов его ширина тянется в правую сторону, а нужно, чтобы во все стороны равномерно растягивалась. Подскажите, пожалуйста. И как, кстати, без align="center"...
HTML, CSS Johnlion 07.03.2014 13:57
HTML, CSS С !doctype высота header не растягивается попроцентно, а без него растягивается
Не нашел подобной другой темы. Имею такую же проблему. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html...
HTML, CSS DeNCHiK001 20.01.2014 20:29
HTML, CSS Блок не растягивается на всю высоту экрана
Внутри <div class="container"></div> располагается таблица, которая растягивается на всю высоту экрана. А вот сам блок container не растягивается, поэтому его фон обрывается при скроллинге страницы....
HTML, CSS nyatll 25.07.2013 21:52
HTML, CSS Почему div меняет фиксированную высоту при масштабировании?
Добрый день. подскажите в чем тут дело? есть блок, в который вставляется флеш-баннер. причем баннер должен быть 100% по ширине и 60 пикселей в высоту. <div style="width:100%; height:60px;...
HTML, CSS ariran 14.05.2013 12:26
HTML, CSS Таблица растягивается в высоту
<html> <title>Моя страница</title> <body> Фильмы <center> <table width="80"border="2"> <tr> <td widht=25%>№</td> <td widht=75%>Название</td> <td widht=75%>Год выпуска</td>
HTML, CSS Alek70694 19.01.2013 20:59
HTML, CSS Почему сайт растягивается?
Как сделать чтобы сайт во всех расширениях монитора был одинаковый не растягивался? Спасибо. Кусочек css body { padding:0; margin:0; min-height:100%; Arial, sans-serif; background:...
HTML, CSS Almaz1 08.11.2012 22:47
C# ASP.NET Создание вложенных элементов
Надо динамически создать примерно такое: <ul> <li id="id_1" class="class_1> <a href="url" class="class_2"> <span class="class_3"> Текст </span> </a> </li> </ul>
C# под Web, ASP.NET =Cl@ud= 12.06.2012 16:46
Опции темы

Текущее время: 17:34. Часовой пояс GMT +4.

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