[Помогите] Откоректировать вертикальное меню

Есть верикальное меню,его необходимо изменить, чтобы заголовок 2 окрывался рядом с первым, при наведении на первый заголовок (заголовок 1) а в заголовок 2 сбоку вставить картинку то есть заголовок 2 дожен состоять из 2-3 столбцев
пример меню на амазон

Код:

<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 "><div class="col-inner  ">
<div class="pav-verticalmenu fix-top hidden-xs hidden-sm">
<div class="navbar navbar-verticalmenu">
<div class="verticalmenu" role="navigation">
<div class="navbar-header">
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav verticalmenu"><li class="bg3 topdropdow parent dropdown ">
<a href="http:" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-mobile"></i><span class="menu-title">заголовок 1</span><b class="caret"></b></a><div class="dropdown-menu" style="width:700px"><div class="dropdown-menu-inner"><div class="row"><div class="mega-col col-md-6 "> <div class="mega-col-inner"><div class="pavo-widget"><div class="pavo-widget"><h4 class="widget-heading">заголовок 2</h4>
<div class="widget-inner ">
<ul>
<li><a href=""><span class="title">9 </span></a></li>
<li><a href=""><span class="title">1 </span></a></li>
<li><a href=""><span class="title">2</span></a></li>
<li><a href=""><span class="title">3</span></a></li>
<li><a href=""><span class="title">4</span></a></li>
<li><a href=""><span class="title">5</span></a></li
</ul>
</div></div></div><div class="pavo-widget"><div class="pavo-widget"><h4 class="widget-heading">заголовок 2</h4>
<div class="widget-inner ">
<ul>
<li><a href=""><span class="title">5</span></a></li>
<li><a href=""><span class="title">6</span></a></li>
<li><a href=""><span class="title">7</span></a></li>
<li><a href=""><span class="title">8</span></a></li>
</ul>
</div>
</div>
</div> </div></div>

подскажите как его трансформировать

 

честно - ниче не поняла) можете накидать на скрине? или дайте ссылку на сайт)