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

HTML, CSS

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

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

19.07.2013, 12:10. Просмотров 1192. Ответов 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

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

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

Таблица растягивается в высоту - 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
Внутри &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 на каком-то из трех элементов его ширина тянется в правую сторону, а нужно, чтобы во все стороны равномерно растягивалась....

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

Почему блок растягивается по размеру текста только в Мозиле? - 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 убрать высоту то фон почти исчезает? Я хочу чтобы высота формировалась по высоте контента внутри блока...


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

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

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