Проблема с меню.

[pharaon]

Есть вертикальное деревоподобное меню. В ИЕ8 работает все хорошо, но в ИЕ7 не очень. Когда нажимаю на Desktops появляется подменю PC, Mac, и потом когда навожу курсор на элемент меню <li>PC</li> , то у меня меняется фон элемента <li>Desktop</li> , а по идее должно только когда навожу на <li>Desktop</li> Здесь ссылка на этот баг

. А еще я указал list-style-position:inside но у ИЕ7 когда навожу курсор на любой элемент меню, то backgrpund-color меняется только под элементом <a></a> .

HTML-код :

<div id="category">

<ul>

<li><a href="http://"><b>Desktops</b></a></li>

<ul>

<li><a href="">PC</a></li>

<li><a href="">Mac</a></li>

</ul>

<li><a href="">Laptops & Notebooks</a></li>

<li><a href="">Components</a></li>

<li><a href="">Software</a></li>

<li><a href="">Phones & PDAs</a></li>

<li><a href="">Cameras</a></li>

<li><a href="">MP3 Players</a></li>

</ul>

</div>

CSS код:

#category ul {

margin-top: 0px;

margin-bottom: 0px;

padding-left: 5px;

}

#category ul li {

list-style:url('../image/bullet_3.png');

list-style-position: inside;

min-height:18px;

}

#category ul li a{

color:#0398fe;

text-decoration:none;

display:block;

}

#category ul li a:hover {

color:#FFFFFF;

}

#category ul li:hover{

list-style:url('../image/bullet_4.png');

list-style-position: inside;

background-color:#7dba1f;

}

Непонимаю что не так сделал, или что не доделал, буду рад за помощь.

[CEBEP]

<ul>
<li><a href="http://"><b>Desktops</b></a></li>
<li style ="margin-left:50px;"><a href="">PC</a></li>
<li style ="margin-left:50px;"><a href="">Mac</a></li>
<li><a href="">Laptops & Notebooks</a></li>
<li><a href="">Components</a></li>
<li><a href="">Software</a></li>
<li><a href="">Phones & PDAs</a></li>
<li><a href="">Cameras</a></li>
<li><a href="">MP3 Players</a></li>
</ul>

И будет счастье

между <ul></ul> не должно быть ничего кроме <li>, даже <ul> не должны стоять. Это и вызывает произвольное трактование кода

[CEBEP]

P.S. Если надо сделать ссылку а ссылаться пока некуда принято писать <a href = "#"></a>

[Justnewone]

Если надо вложить список в список - то делается вот так:

<div id="category">
	<ul>
		<li><a href="http://"><b>Desktops</b></a>
			<ul>
				<li><a href="">PC</a></li>
				<li><a href="">Mac</a></li>
			</ul>
		</li>
		<li><a href="">Laptops & Notebooks</a></li>
		<li><a href="">Components</a></li>
		<li><a href="">Software</a></li>
		<li><a href="">Phones & PDAs</a></li>
		<li><a href="">Cameras</a></li>
		<li><a href="">MP3 Players</a></li>
	</ul>
</div>