Всплывающее меню

[oscora]

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

Собственно стоит задача таким образом, у меня есть своего рода блок, наводя на него курсор, производиться замена изображения, а также к этому блоку прикручено UL меню.

Меня интересует следующее:

Как сделать так, что бы при наведение курсора мыши на всплывающее меню, картинка ":hover" из маин блока не пропадала до тех пор, пока я не уберу курсор за пределы блока и меню ?

.pravo {
  background: url(../images/b1.png);
  display: block;
  width: 322px;
  height: 142px;
 }

.pravo:hover {
    background: url(../images/pravo.png);
}

#menu1{
    list-style:none;
    padding:0;
    margin:0;
}
#menu1 li{
    float:left;
    position:relative;

}
#menu1 li ul{
    list-style:none;
    padding0:0;
    margin:120px 0 0 -40px;
    width:322px;
    position:absolute;
    left:0;
    top:20px;
    display: none;
}
#menu1 li ul li{
    float:none;
    height:20px;
    margin:0;
    width:322px;
    font-weight: bold;
    text-align:center;
    BACKGROUND: url(../images/b1.png);

}
#menu1 li a{
    display:block;
    width:322px;
    height:auto;
}
#menu1 li:hover ul{
    display:block;
}
#menu1 li:hover{
    background:#cc6702;
}

Edited December 23, 2011 by oscora

[JamDaclewew]

люди то все разные..

[Akaciya]

HTML-код приведите, по только стилям сложно понять что вы там нарисовали.

[oscora]

полный код кнопки:

HTML

<ul id="menu1">
     <li> <div class="pravo">
     <div id="tbl">
     ПРАВОВЫЕ СИСТЕМЫ
     </div>
    <div id="img-c">
    <div id="law">
     </div>
    </div>
    </div>

 <ul>
  <li><a href="file:///\\****.ru\***ot\SH***\P**e\G*****an*\garant.exe">Гарант</a></li>
  <li><a href="file:///\\****.ru\***ot\SH***\P**e\K**d****s\kodweb.exe">Кодекс</a></li>
  <li><a href="file:///\\****.ru\***ot\SH***\P**e\Con****\cons.exe">Консультант проф</a></li>
  <li><a href="file:///\\****.ru\***ot\SH***\P**e\CR***\cons.exe">Консультант регион</a></li>
  <li><a href="http://ls**10*.****.ru/">WWW- Кодекс</a></li>
 </ul>
 </li>

CSS

.pravo {
  background: url(../images/b1.png);
  display: block;
  width: 322px;
  height: 142px;
 }

.pravo:hover {
    background: url(../images/pravo.png);
}

#tbl {
	width: auto;
	height: auto;
        padding: 10px 0 0 10px;
        font-family: Arial;
	font-size: 15pt;
	color: #fff

#law {
	BACKGROUND: url(../images/law.png) no-repeat;
	width: 90px;
	height:90px;
	}

#img-c {
	  width: 90px;
	  height:90px;
	  padding:0 0 0 212px;
}

#menu1{
    list-style:none;
    padding:0;
    margin:0;
}
#menu1 li{
    float:left;
    position:relative;

}
#menu1 li ul{
    list-style:none;
    padding0:0;
    margin:120px 0 0 -40px;
    width:322px;
    position:absolute;
    left:0;
    top:20px;
    display: none;
}
#menu1 li ul li{
    float:none;
    height:20px;
    margin:0;
    width:322px;
    font-weight: bold;
    text-align:center;
    BACKGROUND: url(../images/b1.png);

}
#menu1 li a{
    display:block;
    width:322px;
    height:auto;
}
#menu1 li:hover ul{
    display:block;
}
#menu1 li:hover{
    background:#cc6702;
}

[Akaciya]

так вы хотели? http://jsfiddle.net/fyyKP/1/

[oscora]

Да! именно так. спасибо конечно, что сделали всё за меня! Я конечно надеялся на совет который дал бы пищу для размышления!

Спасибо! Сейчас опробую в своём поле всё это.

[oscora]

Всё работает!

Благодарю за помощь!