Как расширить выпадающее меню?

Собственно вопрос в заголовке
хочу чтобы слово Аккумуляторы 180-225Ah (0) и все остальные были каждый в одну строку

 

в stylesheet.css
исправить min-width для #menu .dropdown-inner a

 

а как расширить подкатегорию?
product.tpl
category.tpl
stylesheet.css
облазил, но не нашел

 

выпадающее меню да
а вот там где Выберите подкатегорию - нет

Код:

#menu > li > ul {
    position: absolute;
    left: 50px;
    top: 0px;
    width: 210px;
    background-color: #444444;
    visibility: hidden;

210 изменил на 300 и ничего

 

а еще шире как сделать?

 

http://bootstrap-3.ru/css.php#grid

 

спасибо конечно, но я в бутстрапе вообще не силен
возможно ли написать на что изменить?

 

в общем потыкал
почти устраивает

 

как вот здесь сделать так, что бы Жидкость для гидроусилителя руля (0) была в одну строку?
может отступы слева справа уменьшить? или как?
потому что col-sm изменял, но это в данный момент лучше всего, но не идеально

 

а вам не кажется что вы сильно заморачиваетесь, а если появится категория длиннее чем Жидкость для гидроусилителя руля, что делать будете?

 

а причем силен или нет. Я дал конкретно ссылку на принципы сетки. Уж прочитать (один абзац) что сетка состоит из 12 колонок и цифра это ширина колонки, думаю труда не составляет. ? Если в бутстрапе не сильны, то с чтением наверно все в порядке?

 

Ален, я же написал, что потыкал и немного разобрался, даже установил 3 столбца, а не 4, и даже там где 5 подкатегорий в 1 столбец сделал в 3 столбца, и категория масло пока самая некрасивая из-за этой жидкости, и даже там h3 изменил на h2
tsap, длиннее ее только Зарядное устройство для автомобильного аккумулятора, («"!зарядное устройство для автомобильного аккумулятора"» — 8 629 показов в месяц)
но я пока до нее не дошел
можно и жидкость гур, но
«"!жидкость для гидроусилителя руля"» — 620 показов в месяц
«"!жидкость гидроусилителя руля"» — 263 показа в месяц
«"!жидкость гур"» — 388 показов в месяц
из этого всего делаем вывод, что жидкость для гидроусилителя руля самый ВЧ запрос

 

разделите на два столбца по sm-6
У меня все красиво выглядит. У всех же ширина монитора разная, поэтому чтобы всегда в одну строку, надо как минимум 2 стобца или вообще один. Но тогда не красиво. Уж лучше пусть в две строки пункт будет.
Количество пунктов регулируется в (count($categories) / 4))

 

с количествами столбцов и шириной я поигрался и только после написал

 

Добрый день!
Подскажите, как сделать несколько колонок в выпадающем меню.
Все меню не влазит, так как там 36 категорий.
Желательно разделить на 4 столбца.
Помогите пожалуйста, никак не могу разобраться...
Сайт avega-group.ru
Прикрепляю код css и код вывода меню.
css
#menu{margin-top:1px;width:200px;position:relative;top:0;}
#menu ul{list-style:none;margin:0;padding:0;}
#menu > ul > li{text-align:right;background:url("../image/textures/subtle-pattern-2-2s.jpg") repeat scroll 0 0 rgba(0, 0, 0, 1);border-top:1px solid #CCCCCC;border-bottom:1px solid #CCCCCC;border-left:1px solid #CCCCCC;border-right:1px solid #CCCCCC;margin-top:-1px;}
#menu > ul > li:hover{}
#menu > ul > li > a{background-color:rgba(255, 255, 255, 0.6);}
#menu > ul > li > div > a{border:none;}
#menu > ul > li > a{border-top:1px solid #FFFFFF;border-bottom:1px solid #FFFFFF;font-size:13px;color:#000000;line-height:14px;text-decoration:none;display:block;padding:9px 15px 9px 5px;z-index:4;position:relative;text-transform:uppercase;-webkit-transition:all 300ms ease-out 0s;-moz-transition:all 300ms ease-out 0s;-o-transition:all 300ms ease-out 0s;-ms-transition:all 300ms ease-out 0s;}
#menu > ul > li.children:hover > a.expan:after{content:"";position:absolute;left:97%;bottom:9px;width:0;height:0;border-top:9px solid rgba(0, 0, 0, 0);border-left:9px solid rgba(0, 0, 0, 0);border-right:9px solid #757575;border-bottom:9px solid rgba(0, 0, 0, 0);}
#menu > ul > li > a.active,
#menu > ul > li:hover > a{background-color:rgba(0,0,0,0.5);color:#FFF;}
#menu > ul > li > div{display:none;position:absolute;left:211px;z-index:5;/*padding-left:12px;*/margin-top:-71px;}
#menu > ul > li:hover > div{display:table;}
#menu > ul > li > div > ul{background:#757575;display:table-cell;}
#menu > ul > li ul + ul{}
#menu > ul > li ul > li > a{background-color:#757575;text-decoration:none;padding:8px 12px;color:#FFFFFF;border-bottom:1px solid #353D42;display:block;white-space:nowrap;min-width:186px;}
#menu > ul > li ul > li > a:hover{background:#22282B;color:#993333;}
#menu > ul > li > div > ul > li > a{color:#FFFFFF;text-align:left;}
#menu .menu-item.menu-item_59 > div{margin-top: -35px;}

код
<?php foreach($categories as $category){ ?>
<?php
$count_children = count($category['children']);
$item_classes = "menu-item menu-item_$category[category_id]" . ($count_children ? ' children' : '');
?>
<li class="<?=$item_classes?>">
<?php if($category['active']){ ?>
<a href="<?php echo $category['href']; ?>" class="active expan"><?php echo $category['name']; ?></a>
<?php }else{ ?>
<a class='expan' href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a>
<?php } ?>
<?php if($count_children){ ?>
<div style="margin-left: 0;">
<ul>
<?php foreach($category['children'] as $child){ ?>
<li><a href="<?=$child['href']?>"><?=$child['name']?></a>
<?php } ?>
</ul>
</div>
<?php } ?>
</li>
<?php } ?>

Также прикрепляю картинки, как сделано сейчас и как было бы в идеале.
Похожая реализация сделана на сайте gigant-dveri.ru
Буду благодарен за любую информацию!!!

 

вопрос больше подходит к платным услугам, а не к данной теме.

 

Я с вами абсолютно согласен, я сказал, как будет в идеале. Я буду благодарен, за любую помощь, мне очень важно самое главное, чтобы просто переносилось в другой столбец категории... Я думаю, что там изменить нужно мелочь, но я не могу разобраться...