Форум программистов, компьютерный форум CyberForum.ru

HTML, CSS

Войти
Регистрация
Восстановить пароль
 
Sunman
56 / 56 / 4
Регистрация: 02.03.2010
Сообщений: 406
#1

Почему не растягивается ul на высоту вложенных элементов - HTML, CSS

19.07.2013, 12:10. Просмотров 1123. Ответов 3
Метки нет (Все метки)

Добрый день. Подскажите где косяк: 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
&lt;html&gt; &lt;title&gt;Моя страница&lt;/title&gt; &lt;body&gt; Фильмы &lt;center&gt; &lt;table width=&quot;80&quot;border=&quot;2&quot;&gt; &lt;tr&gt; &lt;td widht=25%&gt;№&lt;/td&gt; &lt;td...

Не растягивается во всю высоту - HTML, CSS
Подскажите, пожалуйста, как заставить div класса main растягиваться по содержимому. сейчас он на какуе-то высоту растягивается, а дальше...

Блок не растягивается на всю высоту экрана - HTML, CSS
Внутри &lt;div class=&quot;container&quot;&gt;&lt;/div&gt; располагается таблица, которая растягивается на всю высоту экрана. А вот сам блок container не...

Блок не растягивается на оставшуюся высоту родительского блока - HTML, CSS
Всем доброго времени суток, имеется такая вёрстка: &lt;!DOCTYPE html&gt; &lt;html lang=&quot;ru&quot;&gt; &lt;head&gt; &lt;meta charset=&quot;UTF-8&quot;&gt; ...

Почему сайт растягивается? - HTML, CSS
Как сделать чтобы сайт во всех расширениях монитора был одинаковый не растягивался? Спасибо. Кусочек css body { padding:0; margin:0;...

Почему ширина растягивается в одну сторону - HTML, CSS
При hover на каком-то из трех элементов его ширина тянется в правую сторону, а нужно, чтобы во все стороны равномерно растягивалась....

После регистрации реклама в сообщениях будет скрыта и будут доступны все возможности форума.
Forastero
533 / 315 / 32
Регистрация: 15.05.2013
Сообщений: 756
Записей в блоге: 1
19.07.2013, 12:42     Почему не растягивается ul на высоту вложенных элементов #2
Здравствуйте. Внесите небольшие поправки. Добавьте свойство:
CSS
1
2
3
#top_menu ul li ul {
    overflow: hidden;
}
Sunman
56 / 56 / 4
Регистрация: 02.03.2010
Сообщений: 406
19.07.2013, 13:04  [ТС]     Почему не растягивается ul на высоту вложенных элементов #3
Помогло,благодарю, но это убило мою логику))
overflow: hidden; - вроде должно скрывать, а тут наоборот появляется, как так?
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
19.07.2013, 13:21     Почему не растягивается ul на высоту вложенных элементов
Еще ссылки по теме:

Почему блок растягивается по размеру текста только в Мозиле? - HTML, CSS
Такая проблема: Сделал 2 &quot;Float&quot; левый и правый.И между ними ещё один блок,назовём его &quot;контент&quot;. По мере заполнения блоков,обёртка...

С !doctype высота header не растягивается попроцентно, а без него растягивается - HTML, CSS
Не нашел подобной другой темы. Имею такую же проблему. &lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot;...

Почему блок не растягивается, если внутренние блоки заходят за его пределы - HTML, CSS
После прочтении о свойстве float я не понимаю один момент. Допустим есть блок с фикс шириной, в нем я добавил три блока c 50% шириной от...

Почему если убрать высоту то фон съезжает - HTML, CSS
Почему если в идентификаторе #dark убрать высоту то фон почти исчезает? Я хочу чтобы высота формировалась по высоте контента внутри блока...

Подчинение вложенных элементов - HTML, CSS
Добрый день, подскажите, пожалуйста, в чём разница между: .menu ul li a и .menu &gt; ul &gt; li &gt; a

Странное положение вложенных элементов - HTML, CSS
Добрый день. Возникла проблема, имеется такой код &lt;div class=&quot;item&quot;&gt; ...... &lt;div class=&quot;analogitem&quot;&gt; &lt;ul&gt; ...


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

Или воспользуйтесь поиском по форуму:
Forastero
533 / 315 / 32
Регистрация: 15.05.2013
Сообщений: 756
Записей в блоге: 1
19.07.2013, 13:21     Почему не растягивается ul на высоту вложенных элементов #4
Sunman, если высота элемента не задана, а в данном случае не задана, то элемент оборачивает дочерние элементы.
Yandex
Объявления
19.07.2013, 13:21     Почему не растягивается ul на высоту вложенных элементов
Ответ Создать тему
Опции темы

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