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

[Ritter]

Сделал выпадающее меню, также при наведении на "Женская одежда", у неё появляется фон рисунком, хочу прилепить еще недостающий рисунок к правой части основного рисунка. Как это сделать? У меня не получается.

Меню сделал так:

<div id="menu">
<ul>
<li>
<a href="#">Женская одежда</a>
<div>
<ul>
<li><a href="#">Платья</a></li>
<li><a href="#">Топы</a></li>
</ul>
</div>
</li>
<li>
<a href="#">Мужская одежда</a>
<div>
<ul>
<li><a href="#">Костюмы</a></li>
<li><a href="#">Рубашки</a></li>
</ul>
</div>
</li>
<li>
<a href="#">Детская одежда</a>
<div>
<ul>
<li><a href="#">Шорты</a></li>
<li><a href="#">Футболки</a></li>
</ul>
</div>
</li>
</ul>
</div>

CSS:

#menu {
	background: #555555;
	height: 48px;
        width: 100%;
}

#menu ul {
	list-style: none;
        width: 1000px;
        margin: 0 auto;
}

#menu > ul > li {
	position: relative;
	float: left;
	z-index: 20;	
}

#menu > ul > li:hover {
	background: url('../image/menu-hover.png') repeat-x;
        height: 48px;
}

#menu > ul > li > a {
	font-size: 12px;
	color: #FFFFFF;
	line-height: 14px;
	text-decoration: none;
	display: block;
	padding: 11px 15px 12px 15px;
	z-index: 6;
	position: relative;}

#menu > ul > li > div {
	display: none;
	background: #FFFFFF;
	position: absolute;
	z-index: 5;
	padding: 5px;
	border: 1px solid #000000;
	background: url('../image/menu.png');
}

#menu > ul > li:hover > div {
	display: table;
}

#menu > ul > li > div > ul {
	display: table-cell;
}

#menu > ul > li ul + ul {
	padding-left: 20px;
}

#menu > ul > li ul > li > a {
	text-decoration: none;
	padding: 4px;
	color: #FFFFFF;
	display: block;
	white-space: nowrap;
	min-width: 120px;
}

#menu > ul > li ul > li > a:hover {
	background: #000000;
}

#menu > ul > li > div > ul > li > a {
	color: #FFFFFF;
}

[ceil100]

зачем в меню пихать дивы?

ul блочный элемент и так

у женской одежды или у подменю?

[Ritter]

div скрытый здесь, а по другому я не знаю как.

рисунок у женской одежды (у основных разделов), у "#menu > ul > li"

Edited October 27, 2011 by Ritter

[ceil100]

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

при таком css коде, ваше меню будет очень много ресурсов жрать

а к вопросу насчет картинки, одну делаете для li:hover, вторую для a:hover (display:block) позиционируя куда надо

Edited October 27, 2011 by ceil100

[Ritter]

а к вопросу насчет картинки, одну делаете для li, вторую для a(display:block) позиционируя куда надо

Такой метод не подходит, так как a(display:block) внутри li, картинка будет накладываться.

[ceil100]

так и есть

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

[Ritter]

так и есть

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

Какую вторую, у li? Если да, то у li она идет целая, а в зависимости от длины названия, она становится шире - уже.

[ceil100]

у а

	li:hover {background:url(1.jpg) no-repeat;}
	a:hover {background:url(1.png) no-repeat 100% 0;}

[Ritter]

у а

	li:hover {background:url(1.jpg) no-repeat;}
	a:hover {background:url(1.png) no-repeat 100% 0;}

Либо я дуб, либо вы что не так пишите.

Это

a:hover {background:url(1.png) no-repeat 100% 0;}

накладывается на это

li:hover {background:url(1.jpg) no-repeat;}

Я не понимаю смысл прозрачности? За рамки li картинка не выходит, а нужно именно чтобы левую картинку дополняла правая.

Edited October 27, 2011 by Ritter

[ceil100]

картинка из а будет поверх картинки из li

когда наводишь курсор на ссылку появляется эта сдвоенная картинка

если верхняя картинка не имеет прозрачных областей, то нафиг она вообще нужна?

может я неправильно вас понял и, нужно было что-то другое?

намного проще понять когда есть какой-то скрин того что надо

пристыковывалась что ли сбоку?

без наложения?

похоже мы вообще о разном беседовали

[Ritter]

Даже если как-то через a её сделать, в итоге пр наведени на дочернее меню, картинка у а пропадет.

единсвенный спопоб вижу, обнять span-ом (например), т.е.:

<li>
<span>
<a href="#">Женская одежда</a> 
<div> 
<ul> 
<li><a href="#">Платья</a></li> 
<li><a href="#">Топы</a></li> 
</ul> 
</div> 
<span>
<li>

но тогда все сделанное рушится.

[ceil100]

так должно быть или иначе?

неужели так сложно было скрин с самого начала выложить?

это же тебе надо в первую очередь

чем полнее и точнее вопрос, тем правильнее и быстрее ответ

[Ritter]

Да вы правильно меня поняли. Смысл тот же.

[ceil100]

это сейчас правильно, а сначала неправильно

в таком случае используйте ::after

это как раз то что подойдет

узнать больше об ::after