Не корректно отображаются подменю - Вопросы по CSS

Добрый день, создал сайт stroy.sro-oboronstroy.ru
И столкнулся со следующими проблемами.

1)В блоки подменю текст не помещается. т.е. он обрезан, как видно на сайте, можно как-нибудь сделать перенос, при этом что бы блок подменю расширялся по содержанию текста.

2)В настройках модуля стоит: "Всегда показывать вложенные подпункты", однако все равно подпункты видны лишь при наведении на родителя.

Подскажите пожалуйста, в чем мои ошибки. Далее CSS-код менюшки

/* begin Menu */
/* menu structure */

.art-menu a, .art-menu a:link, .art-menu a:visited, .art-menu a:hover
{
    outline: none;
}

.art-menu, .art-menu ul
{
  margin: 0;
  padding: 0;
  border: 0;
  list-style-type: none;
  display: block;
}

.art-menu li
{
  margin: 0;
  padding: 0;
  border: 0;
  display: block;
  float: left;
  position: relative;
  z-index: 5;
  background: none;
}

.art-menu li:hover
{
  z-index: 10000;
  white-space: normal;
}

.art-menu li li
{
  float: none;
}

.art-menu ul
{
  visibility: hidden;
  position: absolute;
  z-index: 10;
  left: 0;
  top: 0;
  background: none;
}

.art-menu li:hover>ul
{
  visibility: visible;
  top: 100%;
}

.art-menu li li:hover>ul
{
  top: 0;
  left: 100%;
}

.art-menu:after, .art-menu ul:after
{
  content: ".";
  height: 0;
  display: block;
  visibility: hidden;
  overflow: hidden;
  clear: both;
}
.art-menu, .art-menu ul
{
  min-height: 0;
}

.art-menu ul
{
  background-image: url('../images/spacer.gif');
  padding: 10px 30px 30px 30px;
  margin: -10px 0 0 -30px;
}

.art-menu ul ul
{
  padding: 30px 30px 30px 10px;
  margin: -30px 0 0 -10px;
}




div.art-nav-center
{
  position: relative;
  float: right;
  right: 50%;

}

ul.art-menu
{
  position: relative;
  float: left;
  left: 50%;
}

.firefox2 ul.art-menu
{
  float: none;
}


/* menu structure */

.art-menu
{
  padding: 0 0 0 0;
}

.art-nav
{
  position: relative;
  min-height: 30px;
  z-index: 100;
}

.art-nav .l, .art-nav .r
{
  position: absolute;
  z-index: -1;
  top: 0;
  height: 100%;
  background-image: url('../images/nav.png');
}

.art-nav .l
{
  left: 0;
  right: 0;
}

.art-nav .r
{
  right: 0;
  width: 1920px;
  clip: rect(auto, auto, auto, 1920px);
}


/* end Menu */

/* begin MenuItem */
.art-menu a
{
  position: relative;
  display: block;
  overflow: hidden;
  height: 30px;
  cursor: pointer;
  text-decoration: none;
}


.art-menu ul li
{
    margin:0;
    clear: both;
}


.art-menu a .r, .art-menu a .l
{
  position: absolute;
  display: block;
  top: 0;
  z-index: -1;
  height: 100px;
  background-image: url('../images/menuitem.png');
}

.art-menu a .l
{
  left: 0;
  right: 0;
}

.art-menu a .r
{
  width: 400px;
  right: 0;
  clip: rect(auto, auto, auto, 400px);
}

.art-menu a .t, .art-menu ul a, .art-menu a, .art-menu a:link, .art-menu a:visited, .art-menu a:hover
{
  font-weight: bold;
  font-size: 12px;
  text-align: left;
  text-decoration: none;
  text-transform: uppercase;
}

.art-menu a .t
{
  color: #1C1C1C;
  padding: 0 22px;
  margin: 0 0;
  line-height: 30px;
  text-align: center;
}

.art-menu a:hover .l, .art-menu a:hover .r
{
  top: -35px;
}

.art-menu li:hover>a .l, .art-menu li:hover>a .r
{
  top: -35px;
}

.art-menu li:hover a .l, .art-menu li:hover a .r
{
  top: -35px;
}
.art-menu a:hover .t
{
  color: #EDF5FB;
}

.art-menu li:hover a .t
{
  color: #EDF5FB;
}

.art-menu li:hover>a .t
{
  color: #EDF5FB;
}



.art-menu a:hover.separator-without-submenu
{
  cursor: default;
}

.art-menu a:hover.separator-without-submenu .t
{
  color: #1C1C1C;
}

.art-menu li:hover a.separator-without-submenu .t
{
  color: #1C1C1C;
}

a:hover.separator-without-submenu .r, a:hover.separator-without-submenu .l
{
  top: 0 !important;
}
/* end MenuItem */

/* begin MenuSeparator */
.art-menu .art-menu-li-separator
{
  display: block;
  width: 2px;
  height:30px;
}
.art-nav .art-menu-separator
{
  display: block;
  margin:0 auto;
  width: 2px;
  height: 30px;
  background-image: url('../images/menuseparator.png');
}
/* end MenuSeparator */

/* begin MenuSubItem */
.art-menu ul a
{
  display: block;
  text-align: center;
  white-space: nowrap;
  height: 20px;
  width: 180px;
  overflow: hidden;
  line-height: 20px;
  background-image: url('../images/subitem.png');
  background-position: left top;
  background-repeat: repeat-x;
  border-width: 0;
  border-style: solid;
}

.art-nav ul.art-menu ul span, .art-nav ul.art-menu ul span span
{
  display: inline;
  float: none;
  margin: inherit;
  padding: inherit;
  background-image: none;
  text-align: inherit;
  text-decoration: inherit;
}

.art-menu ul a, .art-menu ul a:link, .art-menu ul a:visited, .art-menu ul a:hover, .art-menu ul a:active, .art-nav ul.art-menu ul span, .art-nav ul.art-menu ul span span
{
  text-align: left;
  text-indent: 12px;
  text-decoration: none;
  line-height: 20px;
  color: #3E3E3E;
  font-weight: normal;
  font-size: 13px;
  margin:0;
  padding:0;
}

.art-menu ul li a:hover
{
  color: #194B74;
  background-position: 0 -20px;
}

.art-menu ul li:hover>a
{
  color: #194B74;
  background-position: 0 -20px;
}

.art-nav .art-menu ul li a:hover span, .art-nav .art-menu ul li a:hover span span
{
  color: #194B74;
}

.art-nav .art-menu ul li:hover>a span, .art-nav .art-menu ul li:hover>a span span
{
  color: #194B74;
}


/* end MenuSubItem */

По тексту

http://stroy.sro-oboronstroy.ru/templates/OboronVST/css/template.css строка 650

добавляем выделенное

.art-menu ul a, .art-menu ul a:link, .art-menu ul a:visited, .art-menu ul a:hover, .art-menu ul a:active, .art-nav ul.art-menu ul span, .art-nav ul.art-menu ul span span {
    color: #3E3E3E;
    font-size: 13px;
    font-weight: normal;
    line-height: 20px;
    margin: 0;
    padding: 0;
    text-align: left;
    text-decoration: none;
    text-indent: 12px;
    width: auto;
}

Зачем показывать подпункты всегда - непонятно. Меню будет залезать на контент.

Taatshi, спасибо, действительно помогло  А на счет постоянно открытого меню, так это желание человека которому я делаю сайт. Я тоже думал о том что блоки будут наезжать на контент, кроме того, в открытом состоянии мне кажется блоки будут наезжать друг на друга. Вообще в идеале заказчик хочет получить меню как на этом сайте: np-poso.ru
Может есть более простой способ сделать так меню? Модуль какой-нибудь, или как тогда все же избежать наездов блоков друг на друга?

Это обычное стандартное меню. Ставите "список" и стилями ввыравниваете отображение так, чтобы подпункты были где нужно.

Я прошу прощения, просто не очень силен в CSS. На сколько я понимаю надо сделать что то такое:

<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>

Потом оформляем как то так

ul li{
   list-style-type:none;
   display:inline
   }
li a{
   display:block;
   float:left
   }
li  a{
   font-family:Tahoma,Helvetica,sans-serif;
   text-decoration:none;
   color:#fff
   }
li a{
   display:block;
   float:left;
   padding:4px 10px;
   background:#193D6A
   }
li a:hover{
   background:#408BE8;
   padding:7px 14px;
   position:relative;
   top:-3px
   }

И если я правильно понимаю, это все вписываю в template.css

А как создать подпункты меню, и задать им позиции?

Результат того что я написал на сайте, подпункты тоже выстроились в ряд...

Большое спасибо за советы, меню вроде бы получилось, но есть несколько небольших проблем.

1)Где то задал отступ, и меню встало криво, никак не нахожу как его выровнять.
2)А так же выровнять текст в подменю, что бы не было таких больших пробелов между словами.

http://stroy.sro-oboronstroy.ru

#menu {width:100%; /*padding:20px 0px 30px 0px;*/padding:0px 0px 0px 0px;font-size:11px;}

#menu .col {width:170px;float:left;_display:inline;position:relative;z-index:100;}

#menu .sep {width:16px;float:left;_display:inline;height:30px;}

#menu .col a {display:block;position:relative;font-size:17px;font-weight:bold;color:#ffffff;line-height:17px;text-decoration:none;}
#menu .col a span {display:block;background:#FF0000;padding:7px 10px 10px 10px;}
#menu .col a i {display:block;position:relative;left:10px;width:0px;height:0px;line-height:0px;overflow:hidden;border-left:4px solid #000000;border-right:4px solid #000000;border-top:4px solid #000000;border-bottom:0px;}
#menu .col a.selected, #menu .col a:hover {;}
#menu .col a.selected span, #menu .col a:hover span {background:#FF0000;}
#menu .col a.selected i, #menu .col a:hover i {border-top-color:#FF0000;}

#menu .sub {width:170px;margin:9px 0px 0px 0px;}
#menu .sub a {display:block;padding:6px 30px 6px 10px;margin:0px 0px 1px 0px;font-size:1em;font-weight:normal;color:#000000;line-height:1em;text-decoration:none;}
#menu .sub a span {background:none;padding:0px;}
#menu .sub a.selected, #menu .sub a:hover {background:#ffffff;color:#000000;padding-right:10px;}
#menu .sub a.selected span, #menu .sub a:hover span {display:block;background:url(../img/gt.gif) no-repeat 100% 50%;padding:0px 20px 0px 0px;}

#inner #menu .sub {position:absolute;z-index:1;display:none;background:#000000;margin:0px;padding:9px 0px;}
#inner #menu .sub a {text-decoration:underline;}
#inner #menu .sub a:hover {text-decoration:none;}
#inner #menu .sub a span {;}
#inner #menu .sub a.selected, #inner #menu .sub a:hover {text-decoration:none;background:none;color:#000000;}
#inner #menu .sub a.selected span, #inner #menu .sub a:hover span {background:none;}

#inner #menu .hover .sub {display:block;}
#inner #menu .hover a i {display:none;}

1ый вопрос отпадает. Просто не тот файл редактировал, инфа по отступу была записана в index.php

http://stroy.sro-oboronstroy.ru/menu/index.css  строка 16  #menu .sub a   правим padding