Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 14.05.2011, 04:34
Аватар для FINoM
Новичок
Отправить личное сообщение для FINoM Посмотреть профиль Найти все сообщения от FINoM
 
Регистрация: 05.09.2010
Сообщений: 2,298

Проблема с созданием субменю
Есть стандартная задача: при наведении на пункт меню категорий показывать список подкатегорий.
<ul class="tree_main_categorys">
   ...
   <li class="sidebar_submenu">
      <a href="#" class="submenu_main_link">BlaBla</a>   
      <ul class="submenu_list">      
         <li><a href="#">Antiques</a></li>      
         <li><a href="#">Art</a></li>
         ...
      </ul>
   </li>
</ul>
Когда наводим на li.sidebar_submenu, должен показываться список ul.submenu_list. Но, к сожалению, li.sidebar_submenu ведет себя почему-то как блок со свойством overflow:hidden, то есть показывается только тот кусок списка, который помещается в этот li. Установка значения overflow:visible не помогает (сайту уже несколько лет и он имеет достаточно крупную таблицу стилей, установка в этом свойстве !important так же не дало результата). ul.submenu_list, естественно, position:absolute.

Что это может быть и как с этим бороться?
Заранее спасибо.
Ответить с цитированием
  #2 (permalink)  
Старый 14.05.2011, 07:12
Аватар для Gvozd
Матрос
Отправить личное сообщение для Gvozd Посмотреть профиль Найти все сообщения от Gvozd
 
Регистрация: 04.04.2008
Сообщений: 6,246

фаербаг вам в руки
Ответить с цитированием
  #3 (permalink)  
Старый 14.05.2011, 09:42
Аватар для walik
Профессор
Отправить личное сообщение для walik Посмотреть профиль Найти все сообщения от walik
 
Регистрация: 09.11.2009
Сообщений: 1,101

Это если не ошибаюсь из за position:absolute. Присвойте элементу li.sidebar_submenu свойство position:relative
__________________
"Всегда пишите код так, будто сопровождать его будет склонный к насилию психопат, который знает, где вы живете."
Мой сертификат :-D клацай
Ответить с цитированием
  #4 (permalink)  
Старый 14.05.2011, 11:05
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,217

Сообщение от FINoM
Что это может быть и как с этим бороться?
По твоему огрызку не понятно что там у тебя и почему... Сделай полный тестовый пример - тогда и будет ясно.
Ответить с цитированием
  #5 (permalink)  
Старый 14.05.2011, 18:00
Аватар для FINoM
Новичок
Отправить личное сообщение для FINoM Посмотреть профиль Найти все сообщения от FINoM
 
Регистрация: 05.09.2010
Сообщений: 2,298

Сообщение от Gvozd
фаербаг вам в руки
Пользуюсь инструментами разработчика в хроме, там всё так, как я прописываю в css.
Сообщение от walik
то если не ошибаюсь из за position:absolute. Присвойте элементу li.sidebar_submenu свойство position:relative
Я сразу так сделал, не первый раз подобный функционал реализовываю, всегда всё было ок.
Сообщение от ksa
По твоему огрызку не понятно что там у тебя и почему...
По-моему всё прозрачно. Наводим на блок со стилями
parent {position:relative; overflow:visible; height:100px; width:100px;},
появляется дочерний элемент
parent child {position:absolute; z-index:100; width:1000px; height:1000px;}
Ширина и высота для тестирования, в реальности они auto для обоих
Появляется только кусок child, который помещается в 100px*100px родительского элемента.
Ответить с цитированием
  #6 (permalink)  
Старый 14.05.2011, 19:29
Аватар для poorking
prodigy
Отправить личное сообщение для poorking Посмотреть профиль Найти все сообщения от poorking
 
Регистрация: 01.11.2010
Сообщений: 503

<style type = "text/css">
ul{
	width: 100px;
	border: 1px solid red;
}
.with_sub{
	position:relative;
}
.with_sub ul{
	display: none;
	position: absolute;
	top:0px;
	left: 100%;
}
.with_sub:hover > ul{
	display: block;
}
</style>

<ul>
	<li>item 1</li>
	<li class = "with_sub"><div>item 2 (sub)</div>
		<ul>
			<li>sub 1</li>
			<li class = "with_sub"><div>sub 2(sub sub)</div>
				<ul>
					<li>sub sub 1</li>
					<li>sub sub 2</li>
					<li>sub sub 3</li>
					<li>sub sub 4</li>
				</ul>
			</li>
			<li>sub 3</li>
		</ul>
	</li>
	<li>item 3</li>
</ul>

так?
__________________
readOnly
Ответить с цитированием
  #7 (permalink)  
Старый 14.05.2011, 19:30
Аватар для walik
Профессор
Отправить личное сообщение для walik Посмотреть профиль Найти все сообщения от walik
 
Регистрация: 09.11.2009
Сообщений: 1,101

С overflow: auto; все работает как надо (если правильно понял)
<style>
.first {
	position:relative; overflow:auto; height:100px; width:100px;
}

.second {
	position:absolute; width:400px; height:400px;background-color: red;z-index: 100;
}
</style>
<div class="first">
	<div class="second"></div>
</div>
__________________
"Всегда пишите код так, будто сопровождать его будет склонный к насилию психопат, который знает, где вы живете."
Мой сертификат :-D клацай

Последний раз редактировалось walik, 14.05.2011 в 19:33.
Ответить с цитированием
  #8 (permalink)  
Старый 15.05.2011, 01:49
Аватар для FINoM
Новичок
Отправить личное сообщение для FINoM Посмотреть профиль Найти все сообщения от FINoM
 
Регистрация: 05.09.2010
Сообщений: 2,298

Отбой, господа. Только въехал что предыдущий разработчик, по непонятным причинам, одному из блоков (там вложенность элементов большая) присвоил overflow:hidden.
Всем спасибо за помощь и извините за ложную тревогу.
Ответить с цитированием
  #9 (permalink)  
Старый 15.05.2011, 21:18
Аватар для x-yuri
Отправить личное сообщение для x-yuri Посмотреть профиль Найти все сообщения от x-yuri
 
Регистрация: 27.12.2008
Сообщений: 4,201

Сообщение от walik
Это если не ошибаюсь из за position:absolute. Присвойте элементу li.sidebar_submenu свойство position:relative
что за проблема с position: absolute?
Ответить с цитированием
  #10 (permalink)  
Старый 16.05.2011, 04:25
Аватар для FINoM
Новичок
Отправить личное сообщение для FINoM Посмотреть профиль Найти все сообщения от FINoM
 
Регистрация: 05.09.2010
Сообщений: 2,298

Сообщение от x-yuri
что за проблема с position: absolute?
У элемента с position:absolute свойства top, left, bottom, right будут срабатывать относительно первого встретившегося элемента с position:relative в цепочке родителей. Но проблемы я в этом не вижу.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Проблема с Popup окном vovuslik jQuery 5 12.06.2010 16:12
Проблема с дизайном после отправки xmlhttprequest, Проблема с дизайном после отправки cyberx AJAX и COMET 3 01.05.2010 17:07
Проблема с CSS COKOJIOB (X)HTML/CSS 5 04.08.2009 14:19
Проблема, в менюшке Большой джо Элементы интерфейса 0 12.07.2009 17:12
Проблема спама lliberty AJAX и COMET 1 12.03.2009 16:47