Границы inline-block

[Launder]

http://jsfiddle.net/Launder/d70c2kg1/4/

<ul class="menu">		        <li><a href="#">Разные вкусности</a>				<ul>					<li><a href="#">Суп с клёцками</a></li>					<li><a href="#">Пироги с капустой и яйцом</a></li>					<li><a href="#">Торт Медовый</a></li>				</ul>			</li>			<li><a href="#">Узбекская кухня</a>				<ul>					<li><a href="#">Плов по-бухарски с изюмом</a></li>					<li><a href="#">Плов с бараниной и нутом</a></li>					<li><a href="#">Халва из ядрышек урюка</a></li>					<li><a href="#">Лагман по-хорезмски</a></li>				</ul>			</li>			<li><a href="#">Итальянская кухня</a>				<ul>					<li><a href="#">Феттучини с ветчиной и грибами в сливочном соусе</a></li>					<li><a href="#">Пицца по-тоскански с индейкой и грейпфрутом</a></li>					<li><a href="#">Кролик по-лигурийски с красным вином</a></li>					<li><a href="#">Миндальные бискотти с медом</a></li>				</ul>			</li></ul>

.menu 	{			background: -moz-linear-gradient(to top, #ecc, #fff8f8);			background: -webkit-linear-gradient(to top, #ecc, #fff8f8);			background: -o-linear-gradient(to top, #ecc, #fff8f8);			background: -ms-linear-gradient(to top, #ecc, #fff8f8);			background: linear-gradient(to top, #ecc, #fff8f8);			border: 1px solid #888; 			border-top: 0;			padding: 0; margin: 0;			font-family: Arial, Helvetica, sans-serif; 			font-size: 0;		}.menu > li		{			display: inline-block;                        width: 200px;                        height: 75px;      			border: 1px solid #fff; 			-moz-box-sizing: border-box;			-webkit-box-sizing: border-box; 			box-sizing: border-box;			font-size: 14px;                        position: relative;		}.menu a		{			text-decoration: none;                        display: block;		}.menu ul		{			list-style: none;		}.menu > li:hover::after 		{			content: '';			position: absolute;			top: 0;			left: 0;			right: 0;			bottom: 0;			-webkit-box-shadow: inset 0 0 10px #777;			-moz-box-shadow: inset 0 0 10px #777;			box-shadow: inset 0 0 10px #777;		}

Почему элемент ul, который является составной частью inline-block элемента li, выходит за его границы, а не растягивает его?
Я это говорю, потому что вижу, что выделяет тень (при наведении на блок).

С другой стороны, inline-block-и, как и должны, выстроились по базовой линии самой нижней строчки текста в них. Значит, всё же, они "чувствуют" вложенный список.

Как объяснить такое двойное поведение?

Edited August 7, 2015 by Launder

[Switch74]

размеры у вашего 'li' фиксированные и он не будет растягиваться ни при каких условиях

[Launder]

Да, что-то я перемудрил.

Убрал фиксированные размеры li.

И добавил .menu ul свойство position: absolute

Я правильно понимаю, что теперь этот список (ul)

1. располагается относительно li (поскольку li - родительский элемент и у него position: relative)

2. но при этом, он (ul) уже В НЕГО (li) НЕ ВХОДИТ?

 

http://jsfiddle.net/Launder/buok0m1s/

Edited August 8, 2015 by Launder

[Launder]

И, если теперь это отдельный элемент (ul), то можно ли сделать их размеры (li и находящегося внутри него ul) взаимообусловленными?

Edited August 12, 2015 by Launder

[Алёна Стрелкова]

И, если теперь это отдельный элемент (ul), то можно ли сделать их размеры (li и находящегося внутри него ul) взаимообусловленными?

Вот так?

http://jsfiddle.net/9xqx8pn1/

[Launder]

Кстати, похоже, что да. Посмотрим как это будет работать, если всё это дело немного усложить

[Launder]

Вот как-то так:

http://jsfiddle.net/Launder/gmLvp2ce/1/

 

Немного непонятно: зачем нужен псевдоэлемент?

Вроде ж и без него работает и должно, по идее, работать.

Но всё же, в каких ситуациях, его наличие становится значимым?...

[Launder]

http://jsfiddle.net/Launder/hece4amb/

 

при данной постановке задачи, всё, вроде, работает и без него...