Вопрос по выпадающему меню

[BogdanK]

Камрады помогите, сделал выпадающее меню вот на главной странице с помощью сайта purecssmenu как мне теперь отрегулировать чтобы выпадающие разделы были по длине текста а получается что длина кнопки выпадающего пункта длиннее чем текст.Как например в разделе прайсы.Это первый вопрос.Второй : как сделать так чтобы каждый выпадающий пункт и его подпункт выпадали вниз (следующий подпункт чуть со смещением вправо)? У меня получается каждый пункт и подпункт выпадают вправо (появляется скроллинг чтобы посмотреть след пункт так как он еще правее), это можно увидеть в пункте Вентиляционное оборудование. Вот код CSS этого меню :

#pcm{display:none;}

ul.pureCssMenu ul{

display:none}

ul.pureCssMenu li:hover>ul{display:block}

ul.pureCssMenu ul{position: absolute;left:-1px;top:98%;}

ul.pureCssMenu ul ul{position: absolute;left:98%;top:-2px;}

ul.pureCssMenu,ul.pureCssMenu ul {

align:center;

margin:0px;

list-style:none;

padding:0px 1px 1px 0px;

background-color:white;

background-repeat:repeat;

border-color:#A6A6A6;

border-width:0px;

border-style:solid;

}

ul.pureCssMenu table {border-collapse:collapse}ul.pureCssMenu {

display:block;

zoom:1;

float: none;

}

ul.pureCssMenu ul{

width:757.05px;

}

ul.pureCssMenu li{

display:block;

margin:1px 0px 0px 1px;

font-size:0px;

}

ul.pureCssMenu a:active, ul.pureCssMenu a:focus {

outline-style:none;

}

ul.pureCssMenu a, ul.pureCssMenu li.dis a:hover, ul.pureCssMenu li.sep a:hover {

display:block;

vertical-align:middle;

background-color:#FFFFFF;

border-width:0px;

border-color:#FCEEB0;

border-style:solid;

text-align:left;

text-decoration:none;

padding:5px;

_padding-left:0;

font:bold 17px Arial;

color: #000000;

text-decoration:none;

cursor:pointer;

}

ul.pureCssMenu span{

overflow:visible;

}

ul.pureCssMenu li {

float:left;

}

ul.pureCssMenu ul li {

float:none;

}

ul.pureCssMenu ul a {

text-align:left;

white-space:nowrap;

}

ul.pureCssMenu li.sep{

text-align:left;

padding:0px;

line-height:0;

height:100%;

}

ul.pureCssMenu li.sep span{

float:none; padding-right:0;

width:3;

height:100%;

display:inline-block;

background-color:#A6A6A6; background-image:none;}

ul.pureCssMenu ul li.sep span{

width:100%;

height:3;

}

ul.pureCssMenu li:hover{

position:relative;

}

ul.pureCssMenu li:hover>a{

background-color:#FF1C1C;

border-color:#4C99AB;

border-style:solid;

font:bold 17px Arial;

color: #FFFFFF;

text-decoration:none;

}

ul.pureCssMenu li a:hover{

position:relative;

background-color:#FF1C1C;

border-color:#4C99AB;

border-style:solid;

font:bold 17px Arial;

color: #FFFFFF;

text-decoration:none;

}

ul.pureCssMenu li.dis a {

color: #AAAAAA !important;

}

ul.pureCssMenu img {border: none;float:left;_float:none;margin-right:5px;width:16px;

height:16px;

}

ul.pureCssMenu ul img {width:16px;

height:16px;

}

ul.pureCssMenu img.over{display:none}

ul.pureCssMenu li.dis a:hover img.over{display:none !important}

ul.pureCssMenu li.dis a:hover img.def {display:inline !important}

ul.pureCssMenu li:hover > a img.def {display:none}

ul.pureCssMenu li:hover > a img.over {display:inline}

ul.pureCssMenu a:hover img.over,ul.pureCssMenu a:hover ul img.def,ul.pureCssMenu a:hover a:hover ul img.def,ul.pureCssMenu a:hover a:hover img.over,ul.pureCssMenu a:hover a:hover a:hover img.over{display:inline}

ul.pureCssMenu a:hover img.def,ul.pureCssMenu a:hover ul img.over,ul.pureCssMenu a:hover a:hover ul img.over,ul.pureCssMenu a:hover a:hover img.def,ul.pureCssMenu a:hover a:hover a:hover img.def{display:none}

ul.pureCssMenu a:hover ul,ul.pureCssMenu a:hover a:hover ul{display:block}

ul.pureCssMenu a:hover ul ul{display:none}

ul.pureCssMenu span{

display:block;

background-image:url(./images/arrv_blue_2.gif);

background-position:right center;

background-repeat: no-repeat;

padding-right:8px;}

ul.pureCssMenu li:hover>a>span{ background-image:url(./images/arrv_white_2.gif);

}

ul.pureCssMenu a:hover span{ _background-image:url(./images/arrv_white_2.gif)}

ul.pureCssMenu ul span,ul.pureCssMenu a:hover table span{background-image:url(./images/arr_blue_2.gif)}

ul.pureCssMenu ul li:hover > a span{ background-image:url(./images/arr_white_2.gif);}

ul.pureCssMenu table a:hover span,ul.pureCssMenu table a:hover a:hover span{background-image:url(./images/arr_white_2.gif)}

ul.pureCssMenu table a:hover table span{background-image:url(./images/arr_blue_2.gif)}

ul.pureCssMenu li a.pureCssMenui0{

font:n;

width: 150px;

display:block;

align: center;

text-align:center;

padding-left: 30px;

}

ul.pureCssMenu li a.pureCssMenui0:hover{

font:o;

}

Edited October 19, 2012 by BogdanK