Jump to content
  • 0

Son of Suckerfish Dropdown menu

d0ublezer0

Asked by d0ublezer0,

 Share

Question

d0ublezer0 Explorer

d0ublezer0

Posted
Posted

www.restonn.ru

log/pass: amel

Хочу добиться, чтобы ширина выпадающих элементов в главном меню была равна ширине родительского пункта меню

В этом модуле они спозиционированы абсолютно и код CSS очень грязен и запутан - я так и не смог разобраться, что от чего зависит. :rolleyes:

Link to comment
Share on other sites

19 answers to this question

Recommended Posts

  • 0
d0ublezer0 Explorer

d0ublezer0

Posted
  • Author
Posted

Получилось немного, но не всё.

Теперь вложенный UL по ширине родительского LI, а вот вложенный LI - не получается сделать по ширине вложенного UL (страничку обновил)

Вложенный абсолютный UL имее width:100% и растягивается по ширине родительского релативного LI

Соответсвенно вложенный LI если ему задать width:100% тянется по оставшейся ширине страницы.

Даже если задать Вложенному UL overflow:hidden, по идее перекрывать должен..

Link to comment
Share on other sites
  • 0
d0ublezer0 Explorer

d0ublezer0

Posted
  • Author
Posted

Ну почему же?

LI на первом уровне релативные, и абсолютные UL, вложенные в них, растягиваются на ширину этих лишек

А вот второй уровень лишек, вложенных в этот самый абсолютный UL ограничить не удается.

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted
Ну почему же?

LI на первом уровне релативные, и абсолютные UL, вложенные в них, растягиваются на ширину этих лишек

А вот второй уровень лишек, вложенных в этот самый абсолютный UL ограничить не удается.

Как это так, я вижу только один вложенный UL, разве их больше?

Link to comment
Share on other sites
  • 0
d0ublezer0 Explorer

d0ublezer0

Posted
  • Author
Posted (edited)

Два пункта меню имеют вложенные подпункты. Группа компаний и Рестораны.

Под словами "LI первого уровня" - я имел ввиду верхний уровень меню, 5 пунктов, то что изначально видно на странице.

Ну а LI второго уровня - имелось ввиду UL LI UL LI - всё, глубже не будет.

Edited by d0ublezer0
Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted
Два пункта меню имеют вложенные подпункты. Группа компаний и Рестораны.

Под словами "LI первого уровня" - я имел ввиду верхний уровень меню, 5 пунктов, то что изначально видно на странице.

Ну правильно, я и говорю, всего одна вложенность, так?

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted
Как раз сам UL-то умещается в родительском LI. А вот его собственные LI-шки если у них размер больше, чем родительский пункт, растягивают этот UL

Слушай, мне кажется тут всё дело в Джумле, наверняка что-то делает чертяга. Я сечас занят, только вечером смогу глянуть, может что-то удастся починить. :rolleyes:

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted

Вот смотри, накидал пример, в котором видно, что всё хорошо, т.е. работает, как и должно, правильно?

<!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">
	*{ margin: 0; padding: 0;}
	#menu { height: 30px; width: 900px; background: red; list-style: none;}
		#menu li { 
			position: relative; 
			height: 30px;
			border: 1px solid #000; 
			float: left;

		}
			#menu li a { display: block;padding: 0 30px;}
			#menu li ul { 
				position: absolute; 
				top: 30px;
				left: 0;
				width: 100%; 
				border: 1px solid #309;
				list-style: none;
			}
				#menu li ul li { float: none;}

</style>
<!--[if IE 6]>
<style type="text/css">


</style>
<![endif]-->
</head>

<body>
	<ul id="menu">
		<li><a href="#">Первый пункт</a></li>
		<li>
			<a href="#"><span>Опять пункт fdgdg dfg ddfg</span></a>
			<ul>
				<li><a href="#">Подменю 1</a></li>
				<li><a href="#">Подменю 2</a></li>
			</ul>
		</li>
		<li><a href="#">Первый пункт</a></li>
	</ul>
</body>
</html>

Link to comment
Share on other sites
  • 0
d0ublezer0 Explorer

d0ublezer0

Posted
  • Author
Posted

Да, всё так. Проблема со стилями, которые в menu.css - по порядку отключал, перевел на твои стили из кода - всё отображается как положено с нужными размерами. Разворачиваться только перестало.

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted
Да, всё так. Проблема со стилями, которые в menu.css - по порядку отключал, перевел на твои стили из кода - всё отображается как положено с нужными размерами. Разворачиваться только перестало.

Да, нужно дальше копать, мы почти у цели :rolleyes:

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept