Как правильно правильно оформить под категорию Меню?

Добрый День всем.

Подскажите как исправить баг в CSS? При наведении на край Под меню, при котором вписываешь длинное название меню, выдается глюк между "Каталогом" и "О нас" быстрое переключение.

Верстка самого меню:

<div class="main-menu">
  <ul class="navigation">
    <li class="nav">
      <a href="/" class="cs">Главная
        <span>Основаня страница</span>
      </a>
    </li>
    <li class="nav">
	<a href="#" class="cs">Каталог</a>
	  <div class="nav-sub">
	    <div class="sub-top"></div>
	    <div class="sub-count">
	      <a href="#">Одежда</a>
            </div>
	    <div class="sub-bottom"></div>
           </div>
	</li>
	<li class="nav">
	  <a href="#" class="cs">О нас
	    <span>Информация о Нас</span>
	  </a>
	</li>
	<li class="nav">
	  <a href="#" class="cs">Контакты
	    <span>Связь с администрацией</span>
	  </a>
        </li>
  </ul>
</div>

CSS:

.header .main-menu {
	overflow: hidden;
	height: 48px;
	background: url("../images/h_menu.png") repeat-x 0 0;
	margin-bottom: 10px;
}

.header ul.navigation {
	overflow: hidden;
}

.header ul.navigation li.nav {
	float: left;
	height: 48px;
	margin: 0 10px 0 0;
	list-style: none;
}

.header ul.navigation li.nav a.cs {
	display: block;
	text-decoration: none;
	height: 48px;
	font-size: 16px;
	padding: 8px 10px 0 10px;
	color: #fff;
}

.header ul.navigation li.nav a.cs span {
	display:block;
	font-size:11px;
	color:#6e7f83;
}

.header ul.navigation li.nav a.cs:hover span {
	color:#2c3436;
}

.header ul.navigation li.nav a.cs:hover {
	background:url("../images/h_nav.png") repeat-x 0 0; color:#2c3436;
}

.header ul.navigation li.nav:hover .nav-sub{
	display: none;
}

.header ul.navigation li.nav:hover .nav-sub {
	display: block;
	position: absolute;
	z-index:9;
	margin:-8px 0 0 0;
	width:178px;
	overflow:hidden;
}

.header div.nav-sub .sub-top {
	background:url("../images/h_sub.png") no-repeat 0 bottom; 
	height:10px;
}

.header div.nav-sub .sub-count {
	background:url("../images/h_sub.png") repeat-y -178px 0; 
	overflow:hidden;
}

.header div.nav-sub .sub-bottom {
	background:url("../images/h_sub.png") no-repeat -356px bottom; 
	height:4px;
}

.header div.nav-sub .sub-count a {
	display:block;
	text-decoration:none;
	height:29px;
	line-height:30px;
	margin:0 0 0 13px;
	color:#fff;
	padding:0 0 0 10px;
	background:url("../images/h_sub_nav.png") no-repeat 0 0;
}

.header div.nav-sub .sub-count a:hover {
	background-position:0 -29px;
	color:#2e3638;
}

Нормальное поведение при коротком названии, ширина данного подменю нормально отображается:


Длинное название в подменю, увеличивается ширина самого меню: