Indus Indusovich

На странице:

<script>
var dataObj = {
  subCat : "#<?=$subCatId?>",
  mainCat : "#<?=$mainCatId?>"
}
</script>
<script src="file.js"></script>

В file.js:

jQuery(function() {
  var $sC = jQuery(dataObj.subCat).hide();
  jQuery(dataObj.mainCat).hover(
     function(){
        $sC.show(300);
     },
     function(){
        $sC.hide();
     }
	);
});

Вам принципиальны теги? Ну не нравятся ul > li сделайте div > div.
код в самом тривиальном варианте будет примерно таким:

<div class="menu-item">
   <a href="#">menu name</a>
   <div class="sub-menu">
      sub menu content
   </div>
</div>
<div class="menu-item">
   <a href="#">menu name</a>
   <div class="sub-menu">
      sub menu content
   </div>
</div>
<div class="menu-item">
   <a href="#">menu name</a>
   <div class="sub-menu">
      sub menu content
   </div>
</div>
<script>
jQuery(document).ready(function($){
   $('.menu-item').hover(
      function(){
          $(this).find('.sub-menu').show();
      },
      function(){
          $(this).find('.sub-menu').hide();
      }
   );
});
</script>
<style>
.sub-menu{
 display:none;
}
</style>

float: left и отступы как у h2.
https://jsfiddle.net/rbkpqunw/

Ну или inline-block, или объединить картинку и текст в один div. Зачем у вас отдельно блоки .image и .text?

1. Залезть в исходники и поменять переменные там.
2. Собрать кастомизированную версию на сайте getbootstrap.com/customize

Второй вариант быстрее, но первый дает потенциально больше преимуществ и знаний (если выберете его - качайте лучше sass исходники вместо less, четвертый бутстрап уже на sass будет сделан)