Проблема с выпадающим меню

Leonidk · September 20, 2010

Доброго времени суток!

Сделал выпадающее меню, все работает!

Если бы не проблема с любимым ИЕ7!!!

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

Подскажите пожалуйста как поправить эту беду!

Сайт: http://ipplaneta.ru

Edited September 20, 2010 by Great Rash
Незачем нам ваши портянки кода, ссылки на сайт вполне достаточно.

Great Rash · September 20, 2010

Добавьте overflow: hidden; всем элементам <a> в вашей менюшке, у которых стоит display: block;

Lincky · September 20, 2010

Добавьте overflow: hidden; всем элементам <a> в вашей менюшке, у которых стоит display: block;

оверфлоу туту не причем. я часто сталкиваюсь с такой проблемой из-за отсутсвия фикс-ой высоты для ссылки.

Лечение Zoom:1 для блочной ссылки и можно для li тож поставить.

Great Rash · September 20, 2010

Leonidk, я же написал вам, что не нужно сюда постить огромные портянки с кодом! Вы что читать не умеете?

Lincky, а что вы будете делать если вам понадобится перенос строк в выпадающем меню?

Lincky · September 20, 2010

Leonidk, я же написал вам, что не нужно сюда постить огромные портянки с кодом! Вы что читать не умеете?
Lincky, а что вы будете делать если вам понадобится перенос строк в выпадающем меню?

здесь проблема в haslayout и ни в чем другом. никакие офервлоу и близко не нужны.

А что ты имеешь в виду под переносом строк. скрин сделай для наглядности.

Great Rash · September 20, 2010

здесь проблема в haslayout и ни в чем другом. никакие офервлоу и близко не нужны.

Для того, чтобы пропали отступы между элементами списка достаточно добавить overflow: hidden;, сперва попробуйте, а потом уже делайте заявления.

Lincky · September 20, 2010

Для того, чтобы пропали отступы между элементами списка достаточно добавить overflow: hidden;, сперва попробуйте, а потом уже делайте заявления.

именно для ссылки блочной поставить?

Для того, чтобы пропали отступы между элементами списка достаточно добавить overflow: hidden;, сперва попробуйте, а потом уже делайте заявления.

у меня отступ все равно остается

Great Rash · September 20, 2010

Да, для блочной ссылки. Быть того не может, я ставлю и у меня все работает. Ссылка на тестовую страницу есть?

Lincky · September 20, 2010

Да, для блочной ссылки. Быть того не может, я ставлю и у меня все работает. Ссылка на тестовую страницу есть?

через иетулбар в иеколлекшн ставлю...остается примерно пиксель-два.

Great Rash · September 20, 2010

Я смотрю не в ИЕ коллекшн, а в ИЕ8 (в режиме ИЕ7).

Короче, вот код - никаких отступов нет, hasLayout тоже не назначен:

<!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" xml:lang="en" lang="en">

<head>
	<title>Title</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />

	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}

		html, body {
			height: 100%;
		}

		div {
			width: 300px;
			border: 1px solid;
		}

		ul {
			width: 300px;
			list-style: none;
		}

		ul li {
			position: relative;
		}

		ul a {
			display: block;
			width: 100%;
			background: lightgreen;
		}

		ul ul {
			display: none;
			position: absolute;
			top: 0;
			left: 100%;
		}

		ul ul a {
			background: pink;
		}

		ul li:hover ul {
			display: block;
		}

		ul a:hover {
			background: pink;
		}

		ul ul a:hover {
			background: lightgreen;
		}
	</style>

	<script type="text/javascript">

	</script>
</head>

<body>

	<div>
		<ul>
			<li>
				<a href="#">list item</a>
				<ul>
					<li>
						<a href="#">list item 1</a>
					</li>
					<li>
						<a href="#">list item 1</a>
					</li>
					<li>
						<a href="#">list item 1</a>
					</li>
				</ul>
			</li>
			<li>
				<a href="#">list item</a>
				<ul>
					<li>
						<a href="#">list item 2</a>
					</li>
					<li>
						<a href="#">list item 2</a>
					</li>
					<li>
						<a href="#">list item 2</a>
					</li>
				</ul>
			</li>
			<li>
				<a href="#">list item</a>
				<ul>
					<li>
						<a href="#">list item 3</a>
					</li>
					<li>
						<a href="#">list item 3</a>
					</li>
					<li>
						<a href="#">list item 3</a>
					</li>
				</ul>
			</li>
		</ul>
	</div>

</body>
</html>

Lincky · September 20, 2010

я не понимаю что ты мне хочешь доказать.

Я сталкивался с такой проблемой и она лечется при помощи zoom. В твоем коде нет ничего что связано с margin, padding, line-height. Это проявляется именно при их употреблении. там есть какая-то схема, при которой появляются лишние разрывы. я не кошу под умного, я просто говорю факты неоднократной правки такой вещи.

Leonidk · September 20, 2010

Сечас проверял: Zoom:1;

помогает, тока не до конца!

разрывы визуально пропали но видимо остались щели(мелкие) - все равно когда ведешь мышкой - меню срывается (не так конечно как раньше на первой щели)

Great Rash · September 20, 2010

Я говорю то, что вижу. А вижу я то, что если открыть ИЕ8, нажать F12, перевести режим рендеринга в режим ИЕ7 и в дебагере проставить для ссылок overflow: hidden; проблема решается. Зумом она тоже решается ну и что? Зум - невалидный css-селектор, а overflow - валидный. Думаю, что, при прочих равных, лучше использовать overflow.

В любом случае проблема исчезновения подменю не решается ни зумом, ни оверфлоу, так что не выдумывать кто под кого косит надо, а проблему решать...

Lincky · September 20, 2010

Я говорю то, что вижу. А вижу я то, что если открыть ИЕ8, нажать F12, перевести режим рендеринга в режим ИЕ7 и в дебагере проставить для ссылок overflow: hidden; проблема решается. Зумом она тоже решается ну и что? Зум - невалидный css-селектор, а overflow - валидный. Думаю, что, при прочих равных, лучше использовать overflow.
В любом случае проблема исчезновения подменю не решается ни зумом, ни оверфлоу, так что не выдумывать кто под кого косит надо, а проблему решать...

отлично. теперь добавляем цвет фона для выпадающего ul. какой-нить оттенок серого к примеру. и все работает отлично. либо прописываем для всего ul фон картинкой, а не для каждого элемента.

zoom - не валидный. а ie7 - недобраузер! поэтому при написании валидных стилей при верстке с поддержкой ие7 говорить стоит в самый последний момент. валидность ведь не должна переходить в статус панацеи для верстальщика.

Edited September 20, 2010 by Lincky

Leonidk · September 20, 2010

отлично. теперь добавляем цвет фона для выпадающего ul. какой-нить оттенок серого к примеру. и все работает отлично. либо не прописываем для всего ul фон картинкой, а не для каждого элемента.
zoom - не валидный. а ie7 - недобраузер! поэтому при написании валидных стилей при верстке с поддержкой ие7 говорить стоит в самый последний момент. валидность ведь не должна переходить в статус панацеи для верстальщика.

Спасибо !!!

Все отлично работает!

PS: а с зумом коректнее меню отображается в ИЕ

Edited September 20, 2010 by Leonidk

Great Rash · September 20, 2010

валидность ведь не должна переходить в статус панацеи для верстальщика.

Согласен, поэтому и написал "при прочих равных". Ну почему же у меня с overflow: hidden; работает?

Lincky · September 20, 2010

Согласен, поэтому и написал "при прочих равных". Ну почему же у меня с overflow: hidden; работает?

и у меня заработало

Edited September 20, 2010 by Lincky

Great Rash · September 21, 2010

Ну я про то и говорю, что без зума можно обойтись

Уф, я уж подумал, что с моим ИЕ что-то не так...

Sign In

Проблема с выпадающим меню

Question

Link to comment

Share on other sites

17 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information