Добавить картинку при наведении

Добрый день. Делаю меню для локального сайта и столкнулся с некоторой проблемой.
На сайте имеется меню : http://prntscr.com/2q5bz
При наведении, например, на "новости", пункт становится выше : http://prntscr.com/2q5ci

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

CSS меню:
[css]
#menubar { margin-bottom: 12px; }
.mbar { height: 52px; background: url("../images/mbar.png") no-repeat; }
.mbar .mbar { background-position: 100% -52px; }
.mbar .mbar .mbar { background-position: 0 -104px; background-repeat: repeat-x; }

.menubar { height: 47px; background: #3f4b51 url("../images/mbar.jpg") no-repeat 100% 0; }
.menubar ul { line-height: 26px; margin-top: 10px; text-transform: uppercase; }
.menubar ul li, .menubar ul a, .menubar ul a b { height: 26px; float: left; }
.menubar ul a { margin-right: 1px; color: #fff; background: url("../images/topmenu.png") no-repeat 0 -999px; }
.menubar ul a b { cursor: pointer; padding: 0 10px; background: url("../images/topmenu.png") no-repeat 0 -999px; }

.menubar ul a:hover { background-position: 0 0; }
.menubar ul a:hover b { background-position: 100% -26px; }

.menubar ul .sublnk a { background-position: 0 -104px; }
.menubar ul .sublnk a b { padding-right: 25px; background-position: 100% -130px; }

.menubar ul .sublnk a:hover, .menubar ul .sublnk.selected a { background-position: 0 -52px; }
.menubar ul .sublnk a:hover b, .menubar ul .sublnk.selected a b { padding-right: 25px; background-position: 100% -78px; }

/*---SubMenu---*/
.menubar ul .sublnk { position: relative; }
.menubar ul li ul { width: 200px; margin: 0; top: 26px; left: 0; position: absolute; z-index: 9999; display: none; }
.menubar ul li ul li a, .menubar ul li ul li, .menubar ul li ul li a b { background: none; float: none; height: auto; display: block; line-height: normal; text-transform: none; }
.menubar ul li ul li { padding: 0; }
.menubar ul li ul li a { color: #fff; padding: 6px 0; width: 100%; border-bottom: 1px solid #3f4b51; background: #4d5c64;
opacity:0.9; -moz-opacity:0.9; filter:alpha(opacity=90);
}
/*при наведении изменяется высота одного пункта меню*/
.menubar ul li ul li a:hover { background-color: #63767f; height: 52px;}[/css]

Само меню выводится так:

HTML:

1. <ul id="topmenu" class="lcol reset">
2.     <li><a href="#"><b>О сайте</b></a></li>
3.     <li class="sublnk"><a href="#"><b>В мире</b></a>
4.         <ul>
5.             <li><a href="#"><b>Новости</b></a></li>
6.             <li><a href="#"><b>Катастрофы</b></a></li>
7.             <li><a href="#"><b>Климат</b></a></li>
8.             <li><a href="#"><b>Погода</b></a></li>
9.         </ul>
10.     </li>
11.     <li class="sublnk"><a href="#"><b>Экономика</b></a>
12.         <ul>
13.             <li><a href="#"><b>Новости</b></a></li>
14.             <li><a href="#"><b>Биржи</b></a></li>
15.             <li><a href="#"><b>Катировки валют</b></a></li>
16.             <li><a href="#"><b>Рынок</b></a></li>
17.         </ul>
18.     </li>
19. </ul>

Спасибо

 

Добавил для теста

[css] /*---SubMenu---*/

/*при наведении изменяется высота одного пункта меню*/
.menubar ul li ul li a:hover { background-color: #63767f; height: 52px;}

.menubar #disasters a:hover { background-image: url("../images/rsshead.png"); }[/css]


В меню прописал

HTML:

1.  
2.             <li id="disasters"><a href="#"><b>Катастрофы</b></a></li>

Как сделать чтоб картинка просто появлялась сбоку, а не кадрировалась ?
СПасибо