Выпадающий список из ячейки - HTML и CSS

Gregor · 30.11.2011, 20:44

Добрый вечер господа. Помогите начинающему в CSS.
Нужно чтобы из ячейки таблицы выпадал список при наведении мыши и оказывался поверх. В данном коде так и происходит, но ячейка расширяется при этом. Как сделать чтобы она не меняла размер. Или подскажите лучший вариант этого решения. Но таблица должна быть. Заранее спасибо.

Код HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Горизонтальный список</title>
  <style type="text/css">
	.hide_show ul{
		display: none;   // скрываем все дочерние списки
	}
	.hide_show:hover ul{
		display: block;   // скрываем все дочерние списки
		position:relative;
		width:100%; height:0px; 
		margin-top:0;
	}
  </style>
 </head>
 <body>
	<table border="1">
		<tr>
		  <td>
		     <ul style="position="relative" z-index="1000">
			<li class="hide_show">
		         	<h3>Выпадающий список</h3>		
				<ul>
					<li >один</li>
					<li>два</li>
					<li>три</li>
					<li>четыре</li>
					<li>пять</li>
					<li>шесть</li>
				</ul>
				</li>	
			</ul>
		<td>	
		</tr>		
	</table>
  </body>
</html>

MyLastHit · 01.12.2011, 16:04

Может в слой обернуть ul?

Код:

<ul style="position="relative" z-index="1000">

Что это?

_J_ · 03.12.2011, 01:05

Необходимо закрыть тег </td>
Исправить пунктуацию <ul style="position:relative; z-index:1000;">
<h3>Выпадающий список</h3> убери теги <h3> или замени на <span style="...">Выпадающий список</span>

Код HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Горизонтальный список</title>
  <style type="text/css">
	.hide_show ul{
		display: none;   // скрываем все дочерние списки
	}
	.hide_show:hover ul{
		display: block;   // скрываем все дочерние списки
		position:relative;
		width:100%; height:0px; 
		margin-top:0;
	}
  </style>
 </head>
 <body>
	<table border="1">
		<tr>
		  <td>
		     <ul style="position:relative; z-index:1000;">
			<li class="hide_show">
		         	Выпадающий список		
				<ul>
					<li >один</li>
					<li>два</li>
					<li>три</li>
					<li>четыре</li>
					<li>пять</li>
					<li>шесть</li>
				</ul>
				</li>	
			</ul>
		</td>	
		</tr>		
	</table>
  </body>
</html>

01.12.2011, 16:04	#2
MyLastHit Очень суровый Участник клуба Регистрация: 17.12.2009 Сообщений: 1,988	Может в слой обернуть ul? Код: `<ul style="position="relative" z-index="1000">` Что это? Ненавижу быть как все, но люблю, чтобы все были как я.

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Выпадающий список	Павел_Игоревич	Помощь студентам	3	17.05.2011 23:29
Выпадающий список	alec_av	Microsoft Office Excel	2	22.04.2010 19:59
Выпадающий список в зависимости от значения ячейки	Tanya2007	Microsoft Office Excel	6	25.03.2010 01:33
Выпадающий список	Акашаев Нурлан	Общие вопросы Delphi	3	27.06.2008 16:58
выпадающий список	Toxa	Microsoft Office Excel	2	23.04.2007 09:40