Требуется совет по выпадающему меню

[Mila]

У меня проблема с выпадающим меню - http://s54.radikal.ru/i146/1103/d5/e8f8e411f32f.jpg

При нажатии на ссылку в 1м подменю сразу выпадают все дочерние подменю.

HTML:

	<div id="menu">
        <ul class="cat_menu" id="cat_menu">
           <li><a href="" class="subcat">Новости</a>
               <ul>
                  <li><a href="">Мир</a></li>
                  <li><a href="">Видео</a></li>
                  <li><a href="" class="subcat">Горячие новости</a>
                     <ul>
                        <li><a href="" class="subcat">Афиша</a>
                            <ul>
                                <li><a href="">Цирк </a></li>
                                <li><a href="">Фильмы</a></li>
                                <li><a href="">Концерты</a></li>
                                <li><a href="">Спектакли</a></li>
                                <li><a href="">Гороскоп</a></li>
                                <li><a href="">Телепрограмма</a></li>
                            </ul>
                        </li>
                        <li><a href="">Работа</a></li>
                     </ul>
                  </li>
                  <li><a href="">Украина</a></li>
              </ul>
          </li>
      </ul>
  </div>

CSS:

/* ========================= Menu */
#menu { 
  background : #c70601;
  width: 100%; 
  height: 46px; 
  margin: 0 auto 30px; 
  padding: 0; 
  color: #ffffff; 
  text-align: 
  left; 
  z-index: 10; 
} 

/* ========================= Cat_menu */
#cat_menu, #cat_menu li { 
  float: left; 
  z-index: 100; 
  list-style-type: none; 
  background: transparent; 
}
#cat_menu { margin: 0; }
#cat_menu li { 
  position: relative; 
  margin: 1px 0 0 0; 
  padding: 0; 
  text-align: center; 
}
#cat_menu li:first-child { background : none;	}
#cat_menu li a, #cat_menu li a:visited { 
  display: block; 
  padding: 11px 17px 14px 17px; 
  color: #fff; 
  font-size: 16px; 
  background: transparent; 
  display: block; 
}
#cat_menu li a:hover, #cat_menu a:active { 
  background : #826e6e;
  color: #fff; 
  padding: 11px 17px 14px 17px; 
  display: block; 
  text-decoration: none; 
}

/* ========================= Sub Menu */
#cat_menu ul { 
  position: absolute; top: 45px; left: 0; 
  background: #eee; 
  width: 200px; 
  border: 1px solid #ddd; 
  z-index: 1000; 
  display: none; 
  margin: 0; 
  padding: 0;
}
#cat_menu ul li { 
  float: left; 
  position: relative; 
  width: 200px; 
  height: auto; 
  background: transparent; 
  font-weight: normal; 
  text-align: left; 
  line-height: 1; 
  margin: 0; 
  padding: 0;
}
#cat_menu ul li a:link, #cat_menu ul li a:visited { 
  color: #c81113; 
  float: left; 
  width: 180px; 
  background: transparent; 
  padding: 6px 10px 8px 10px; 
  font-weight: normal; 
  text-align: left; 
  font-size: 14px; 
  text-decoration: none; 
}
#cat_menu ul li a:hover, #cat_menu ul li a:active { 
  background-color: #826e6e; 
  color: #fff; 
  float: left; 
  width: 180px; 
  height: auto; 
  padding: 6px 10px 8px 10px; 
  font-weight: normal; 
  text-align: left; 
  color: #fff; 
  text-decoration: none; 
}

/* ========================= Sub sub Menu */
ul#cat_menu ul ul { 
  position: absolute; left: 200px; top: 0; 
  display: none; 
  background: #eee; 
  width: 200px; 
  border: 1px solid #ddd; 
  z-index: 1000; 
}
ul#cat_menu ul ul ul { position: absolute; left: 200px; display: none; z-index: 1000; }

ul#cat_menu li ul {display: none;}
ul#cat_menu li:hover ul {display: block;}

ul#cat_menu ul li ul {display: none!important;}
ul#cat_menu ul li:hover ul {display: block!important;}

ul#cat_menu ul ul li ul {display: none;}
ul#cat_menu ul ul li:hover ul {display: block;}

Помогите, пожалуйста, это исправить.

Вот файл с меню для тех, кто захочет мне помочь - http://depositfiles.com/files/j0dqzywz3

Edited March 26, 2011 by Mila

[Mila]

Никак не могу справиться с этим меню.

Помогите, кто-нибудь, плиз...

[swetlana]

С удовольствием поможем.

Только для этого нужна ссылка на сайт, где оно живёт.

[PanSoul]

Вот держи (Я там чуть-чуть исправил - думаю справишься и если надо будет, изменишь на своё)

HTML

<div id="menu">
        <ul class="cat_menu" id="cat_menu">
           <li><a href="" class="subcat">Новости</a>
               <ul class="r1">
                  <li><a href="">Мир</a></li>
                  <li><a href="">Видео</a></li>
                  <li><a href="" class="subcat">Горячие новости</a>
                     <ul class="r2"> 
                        <li><a href="" class="subcat">Афиша</a>
                            <ul class="r3">
                                <li><a href="">Цирк </a></li>
                                <li><a href="">Фильмы</a></li>
                                <li><a href="">Концерты</a></li>
                                <li><a href="">Спектакли</a></li>
                                <li><a href="">Гороскоп</a></li>
                                <li><a href="">Телепрограмма</a></li>
                            </ul>
                        </li>
                        <li><a href="">Работа</a></li>
                     </ul>
                  </li>
                  <li><a href="">Украина</a></li>
              </ul>
          </li>
      </ul>
  </div>

CSS

		/* ========================= Menu */
#menu { 
  background : #c70601;
  width: 100%; 
  height: 46px; 
  margin: 0 auto 30px; 
  padding: 0; 
  color: #ffffff; 
  text-align: 
  left; 
  z-index: 10; 
} 

/* ========================= Cat_menu */
#cat_menu, #cat_menu li { 
  float: left; 
  list-style-type: none; 
  background: transparent; 
}
#cat_menu { margin: 0; }
#cat_menu li { 
  position: relative; 
  margin: 1px 0 0 0; 
  padding: 0; 
  text-align: center; 
}
#cat_menu li:first-child { background : none;   }
#cat_menu li a{ 
  display: block; 
  padding: 11px 17px 14px 17px; 
  color: #fff; 
  font-size: 16px; 
  background: transparent; 
  display: block; 
}
#cat_menu li a:hover{ 
  background : #826e6e;
  color: #fff; 
  padding: 11px 17px 14px 17px; 
  display: block; 
  text-decoration: none; 
}

/* ========================= Sub Menu */
#cat_menu ul { 
  position: absolute; top: 45px; left: 0; 
  background: #eee; 
  width: 200px; 
  border: 1px solid #ddd; 
  display: none; 
  margin: 0; 
  padding: 0;
}
#cat_menu ul li { 
  float: left; 
  position: relative; 
  width: 200px; 
  height: auto; 
  background: transparent; 
  font-weight: normal; 
  text-align: left; 
  line-height: 1; 
  margin: 0; 
  padding: 0;
}
#cat_menu ul li a:link, #cat_menu ul li a:visited { 
  color: #c81113; 
  float: left; 
  width: 180px; 
  background: transparent; 
  padding: 6px 10px 8px 10px; 
  font-weight: normal; 
  text-align: left; 
  font-size: 14px; 
  text-decoration: none; 
}
#cat_menu ul li a:hover, #cat_menu ul li a:active { 
  background-color: #826e6e; 
  color: #fff; 
  float: left; 
  width: 180px; 
  height: auto; 
  padding: 6px 10px 8px 10px; 
  font-weight: normal; 
  text-align: left; 
  color: #fff; 
  text-decoration: none; 
}

/* ========================= Sub sub Menu */
ul#cat_menu ul ul { 
  position: absolute; left: 200px; top: 0; 
  display: none; 
  background: #eee; 
  width: 200px; 
  border: 1px solid #ddd; 

}

ul#cat_menu li:hover .r1 {display: block;}
ul#cat_menu li .r1 li:hover .r2{display: block;}
ul#cat_menu li .r1 li .r2 li:hover .r3{display: block;}

P.S. главное суть понять

[Mila]

Спасибо, теперь работает.

[PanSoul]

Спасибо, теперь работает.

Да, пожалуйста