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

Ответ Создать новую тему
 
19.07.2013, 12:10   #1
Sunman
Форумчанин
Регистрация: 02.03.2010
Сообщений: 391
Репутация: 53 (53)
Лучшие ответы: 1
Почему не растягивается ul на высоту вложенных элементов / HTML, CSS

Добрый день. Подскажите где косяк: 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

Запрещено размещать ссылки на коды программ, расположенные на других сайтах. Коды программ должны размещаться на форуме.
19.07.2013, 12:10
AdAgent
Объявления
19.07.2013, 12:42   #2
Forastero
Форумчанин
Регистрация: 15.05.2013
Сообщений: 647
Репутация: 494 (276)
Записей в блоге: 1
Лучшие ответы: 17
Почему не растягивается ul на высоту вложенных элементов

Здравствуйте. Внесите небольшие поправки. Добавьте свойство:
Код CSS
1
2
3
#top_menu ul li ul {
    overflow: hidden;
}
Другие темы раздела
sharepoint: Как правильно создавать горизонтальное выпадающее меню HTML, CSS
Здравствуйте, у меня есть вопрос , как правильно создавать горизонтальное выпадающее меня, с использованием соственного html, css и javascript кода ?
CSS overflow hidden HTML, CSS
проблема в том что на сайте siteкогда ставлю overflow hidden облака исчезают полностью а когда убираю есть прокрутка в права тс как поставить границу что бы Экран не прокручивался { margin: 100px; padding: -100px; } #sky { height: -550px;
19.07.2013, 13:04  [ТС]   #3
Sunman
Форумчанин
Регистрация: 02.03.2010
Сообщений: 391
Репутация: 53 (53)
Лучшие ответы: 1
Почему не растягивается ul на высоту вложенных элементов

Помогло,благодарю, но это убило мою логику))
overflow: hidden; - вроде должно скрывать, а тут наоборот появляется, как так?
19.07.2013, 13:21   #4
Forastero
Форумчанин
Регистрация: 15.05.2013
Сообщений: 647
Репутация: 494 (276)
Записей в блоге: 1
Лучшие ответы: 17
Почему не растягивается ul на высоту вложенных элементов / HTML, CSS

Sunman, если высота элемента не задана, а в данном случае не задана, то элемент оборачивает дочерние элементы.
19.07.2013, 13:21
Yandex
Объявления
После регистрации реклама в сообщениях будет скрыта и будут доступны все возможности форума.
Ответ Создать новую тему

Похожие темы
Тема Раздел Автор Дата
HTML, CSS Не растягивается во всю высоту
Подскажите, пожалуйста, как заставить div класса main растягиваться по содержимому. сейчас он на какуе-то высоту растягивается, а дальше прерывается. на картинке показал, где прерывается. И страничка в архивчике :)
HTML, CSS Johnlion 27.03.2014 00:05
HTML, CSS Почему ширина растягивается в одну сторону
При hover на каком-то из трех элементов его ширина тянется в правую сторону, а нужно, чтобы во все стороны равномерно растягивалась. Подскажите, пожалуйста. И как, кстати, без align="center" выровнять по центру эти кнопки (шапка, содерж и подвал)? <div class="contentBlock"> <div> <div...
HTML, CSS Johnlion 07.03.2014 13:57
HTML, CSS Блок не растягивается на всю высоту экрана
Внутри <div class="container"></div> располагается таблица, которая растягивается на всю высоту экрана. А вот сам блок container не растягивается, поэтому его фон обрывается при скроллинге страницы. Как это исправить? Могу предоставить урл в личку по просьбе.
HTML, CSS nyatll 25.07.2013 21:52
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: url('images/bgs/body.jpg') top left fixed no-repeat; -o-background-size: 100% 100%; ...
HTML, CSS Almaz1 08.11.2012 22:47
Опции темы

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

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